悬停时jquery暂停恢复

Question

我无法理解为什么停止工作。

我在这里设置了一个示例：

http://jsfiddle.net/MNT4e/

悬停时的暂停/恢复工作正常，经过2次循环后停止。

如何让悬停功能连续工作？

Answer 1

Live Demo （为了测试目的，删除了一堆列表项）

不使用暂停/恢复插件，因为我很确定这会导致问题。这样做只是在悬停时停止动画，并在你离开时重新开始动画。由于您已经将动画设置基于当前位置，因此它将恢复正常。

修改 修复了每个悬停时动画减慢的问题。现在应该完美地工作，不管它的循环次数。

var vox_news = 0;

$('.voxNews li').each(function() {
    vox_news += $(this).outerWidth( true );
});

$('.voxNews').parent().append($('.voxNews').clone());
    function setupNews(w) {
        function phase1() {
            var voxNews = $('.voxNews').first(),
                curMargin = voxNews.css('margin-left').replace("px", ""),
                animSpeed = (w*20) - (Math.abs(curMargin)*20);

            voxNews.animate({'margin-left' : '-' + w + 'px'}, animSpeed, 'linear', phase2);
        }
        function phase2() {
            $('.voxNews').first().css({'margin-left' : '0px'});
             phase1();
        }
        $('.voxNews li a').hover(function() {
            $('.voxNews').stop();
        }, function() {
            phase1();
        });
        phase1();
    }

setupNews(vox_news);

Answer 2

我认为你应该像这样定义一个全局布尔变量：

var isAnimating = false;

然后根据该变量控制动画。例如：

animateNews() {
    if (isAnimating) {
        //list animation
    }
}

listResume () { isanimating = true; }

listPause () { isanimating = false; }

你的动画就像：

window.onload = function () { var t = setTimeout("animateNews", 40); }

我不会为那个使用jQuery，因为如果你开始制作动画，jQuery也会使用一点CPU ......如果你想要平滑地生长盒子或者滑动图像（画廊或类似的东西）你会需要它）。

Answer 3

删除hover处理程序并添加：

$('.voxNews li').delegate('a', 'mouseenter', function() {
    $('.voxNews').pause();
});
$('.voxNews li').delegate('a', 'mouseleave', function() {
    $('.voxNews').resume();
});