jQuery를 : 호버

Question

에 일시 정지 슬라이드 쇼 그래서 나는이 코드를 가지고 :

100 % 잘 작동

$(document).ready(function(){ 
    $("#slideshow > div:gt(0)").hide(); 
    setInterval(function() { 
    $("#slideshow > div:first") 
      .fadeOut(1000) 
      .next() 
      .fadeIn(1000) 
      .end() 
      .appendTo("#slideshow"); 
}, 3000); 
}); 

.. 내가 가져가 일시 중지 할 수있는 슬라이드 쇼의 .hover() 기능을 추가하는 방법은 무엇을?

Answer 1

메서드 setInterval()은 clearInterval()을 사용하여 현재 간격/시간 제한을 지우는 데 사용할 수있는 intervalID를 반환합니다.

당신은 같은 것을 할 수 있습니다

$(document).ready(function() { 

    var timer; 

    $("#slideshow > div:gt(0)").hide(); 

    $("#slideshow") 
     // when mouse enters, clear the timer if it has been set 
     .mouseenter(function() { 
      if (timer) { clearInterval(timer) } 
     }) 
     // when mouse goes out, start the slideshow 
     .mouseleave(function() { 
      timer = setInterval(function() { 
       $("#slideshow > div:first") 
        .fadeOut(1000) 
        .next() 
        .fadeIn(1000) 
        .end() 
        .appendTo("#slideshow"); 
      }, 3000); 
     }) 
     // trigger mouseleave for initial slideshow starting 
     .mouseleave(); 

});​ 

DEMO