鼠标悬停问题的旋转列表

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*/});

这样，您可以在完成悬停后恢复间隔。