停止列表動畫懸停

Question

我們在這裏做動畫：

Animation list

function run() { 
    //jQuery("li").click(function() { 
    var prev = jQuery("#rotated li:first-child"); 
    jQuery.unique(prev).each(function (i) { 
     jQuery(this).delay(i * 600).slideUp(function() { 
      jQuery(this).appendTo(this.parentNode).slideDown(); 
     }); 
    }); 
    //}); 
    jQuery('#rotated li:first-child').hover(function() { 
     jQuery(this).pause(true,true).slideUp 
    }) 
} 
window.setInterval(run, 3000); 

我們只需要停止動畫當用戶將鼠標懸停「#rotated」的元素。

感謝您的幫助。

Answer 1

您可以我們可以使用clearInterval（）

var intVal = window.setInterval(run,3000); 

$('#rotated').on('mouseenter',function(){ 
clearInterval(intVal); 
}); 

DEMO

如果你想讓它繼續旋轉，當鼠標離開爲此

$('#rotated').on('mouseenter', function() { 
    clearInterval(intVal); 
}).on('mouseleave', function() { 
    intVal = window.setInterval(run, 3000); 
}); 

DEMO