在悬停时停止列表动画

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

如果您希望它在mouseleave执行此操作时继续旋转

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

DEMO