2012-11-01 3 views
1

나는 클릭 할 때 두 개의 이미지를 토글하는 슬라이드 쇼 재생/일시 정지 버튼을위한 jQuery 스크립트를 가지고있다. 그 사이에 토글되는 별도의 이미지에 롤오버 상태를 추가 할 수 있습니까? 여기롤 오버로 Jquery 재생/일시 중지 토글 전환

$(".play").toggle(
function() { 
$(this).find("img").attr({src:"images/btn-play.png"}); 
}, 
function() { 
$(this).find("img").attr({src:"images/btn-pause.png"}); 
} 
); 

를 사이트의 :

여기에 스크립트의 http://www.beta.erickdoxey.com (진행 중). 이전 및 다음 버튼은 일시 중지/재생 버튼으로 롤오버 상태를 유지하려고합니다. 어떤 도움을 주시면 감사하겠습니다.

답변

0

내 제안은 재생 버튼에 클래스를 추가 한 다음 마우스를 올리면 해당 클래스를 감지하는 것입니다. 내 말은 다음과 같습니다

$(".play").toggle(function() { 
    $(this).find("img").attr({src:"images/btn-play.png"}).addClass('paused'); 
}, function() { 
    $(this).find("img").attr({src:"images/btn-pause.png"}).removeClass('paused'); 
}); 

는 그런 다음과 같이 가져가 그것을 감지 할 수 있습니다 :

if (this).hasClass('paused') { 
    $(this).find("img").attr({src:"images/btn-play-hover.png"}) 
} else { 
    $(this).find("img").attr({src:"images/btn-pause-hover.png"}) 
} 

당신은 더 이상 너무 다른 것들에 대한 클래스를 사용할 수 있습니다.

+0

addClass 및 removeClass 솔루션은 훌륭하게 작동했지만 호버 이벤트 메서드가 제대로 작동하지 않았습니다. 대신 mouseenter 및 mouseout 이벤트를 사용했습니다. 감사! – genevavoom

+0

당신을 환영합니다! 네, 저는 보통 mouseenter와 mouseout이 함께 작업하기 쉽습니다. – koostudios