鼠標懸停問題的旋轉列表

Question

我有一個每3秒旋轉一次的列表項，這很好，我的問題實際上是向它引入了兩個事件，一個是mouseover和mouseleave。所以基本上，當mosue懸停在列表上，列表停止移動，並且當鼠標離開時它繼續。 這是我的嘗試。它不能按預期工作，事實上，當鼠標在列表上時，它會滯後，請幫助。

function test() { 
    var pre = $("ul li:first-child"); 
    (pre).each(function(i) { 
     $(this).slideUp(function(){ 
     $(this).appendTo(this.parentNode).slideDown(); 
    }); 
    }); 
} 
window.setInterval(test, 3000); 

$("ul").mouseover(function(){ 
    $("ul li").stop(); 
}); 

Answer 1

var test = function(){ 
    if(keepGoing){ 
     var pre = $("ul li:first-child"); 
     pre.each(function(i){ 
      $(this).slideUp(function(){ 
       $(this).appendTo(this.parentNode).slideDown(); 
      }); 
     }); 
    } 
} 

var keepGoing = true; 

window.setInterval(test, 3000); 

$("ul").hover(function(){ 
    keepGoing = false; 
}, function(){ 
    keepGoing = true; 
}); 

Answer 2

window.setInterval會返回一個ID

var intervalId = window.setInterval(test, 3000);

你想要做什麼，是那麼CLEAR當你將鼠標懸停在該間隔

clearInterval(intervalId); 

而且 - 使用

$('ul').hover(function() {/*on hover*/}, function() {/*on leave*/});

這樣，您可以在完成懸停後恢復間隔。