jquery在悬停时暂停恢复答案

【问题标题】：jquery pause resume on hoverjquery在悬停时暂停恢复
【发布时间】：2011-06-28 15:16:23
【问题描述】：

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

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

http://jsfiddle.net/MNT4e/

悬停时的暂停/恢复工作正常，但在 2 个循环后停止。

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

【问题讨论】：

这绝对是插件中的 .pause .resume 。

标签： jquery hover

【解决方案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);

【讨论】：

【解决方案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...如果您想要平滑地增长盒子或滑动图像（画廊或类似的东西），您将需要它)。

【讨论】：

【解决方案3】：

删除您的 hover 处理程序并添加：

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

【讨论】：

让它超过 2 次传球并停止（同样的事情发生在 OP 上）。只需将列表缩短到三项左右即可更快地进行测试。