jQuery的：懸停

Question

暫停幻燈片所以我有這樣的代碼：

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

，工程100％的罰款.. 我在哪裏可以添加.hover()功能的幻燈片暫停懸停？

Answer 1

方法setInterval()返回intervalID，你可以用它來清除使用clearInterval()當前間隔/超時。

你可以做這樣的事情：

$(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