вращающийся список с проблемой наведения мыши

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 вернет идентификатор

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