Question

我有一个列表项，每3秒旋转一次很好，我的问题实际上是向它引入了两个事件，一个鼠标悬停和鼠标离开。所以基本上当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

window.setInterval将返回一个ID

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

你要做的是，当你悬停

然后清除那个间隔

clearInterval(intervalId);

另外 - 使用

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

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

Answer 2

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

带鼠标悬停问题的旋转列表

2 个答案: