如何停止有弹性的 JQuery 动画？答案

【问题标题】：How do I stop a bouncy JQuery animation?如何停止有弹性的 JQuery 动画？
【发布时间】：2012-06-04 14:44:07
【问题描述】：

在我正在开发的 web 应用程序中，我想创建一些 slider divs，它们将分别通过 mouseover 和 mouseout 上下移动。我目前使用 JQuery 实现了它hover() 函数，通过使用animate() 并根据需要减少/增加它的top css 值。实际上，这非常有效。

问题是它往往会卡住。如果将鼠标移到它上面（尤其是靠近底部），然后快速移开它，它会连续上下滑动，直到完成 3-5 个循环才会停止。对我来说，这个问题似乎与一个动画在另一个动画完成之前开始有关（例如，两个动画试图运行，所以它们来回滑动。）

好的，现在是代码。这是我正在使用的基本 JQuery：

$('.slider').hover(
    /* mouseover */
    function(){
        $(this).animate({
            top : '-=120'
        }, 300);
    },
    /* mouseout*/
    function(){
        $(this).animate({
            top : '+=120'
        }, 300);
    }
);

我还重新创建了 JSFiddle 中的行为。

对正在发生的事情有任何想法吗？ :)

==EDIT== 更新的 JSFiddle

【问题讨论】：

当我在小提琴中快速移除它时，它似乎只上下滑动一次
当您将鼠标悬停在 innerContent 上时，它会向上移动，从而使其不再位于鼠标下方，触发 mouseleave 事件，使其动画回到原来的位置。你到底想做什么？
@Kevin，他说的问题是，有时当您将鼠标移到滑块上一次时，动画会执行多个循环，即多次上下移动。
@sv_in 是的，但这是由于 div 从鼠标下方动画出来，触发了离开事件，这反过来又在动画返回时再次触发了进入事件，然后是离开再次导致循环。
查看我的更新答案，我解决了闪烁问题。

标签： javascript jquery animation sliding

【解决方案1】：

这并不完美，但添加 .stop(true,true) 会阻止您看到的大部分内容。

http://jsfiddle.net/W5EsJ/18/

如果您从下往上快速悬停，它仍然会闪烁，因为您将鼠标移出 div 会触发 mouseout 事件，从而使 div 向下移动。

您可以通过减少延迟来减少闪烁，但是在延迟为 0（无动画）之前它仍然会存在

更新

我想了想，意识到有一个明显的解决方案。类似 Hoverintent 的功能！

http://jsfiddle.net/W5EsJ/20/

$(document).ready(function() {
    var timer;
    $('.slider').hover(
        /* mouseover */
        function(){
            var self = this;
            timer = setTimeout(function(){
                $(self).stop(true,true).animate({
                    top : '-=120'
                }, 300).addClass('visible');
            },150)
        },
        /* mouseout*/
        function(){
            clearTimeout(timer);
            $(this).filter(".visible").stop(true,true).animate({
                top : '+=120'
            }, 300).removeClass("visible");
        }
    );
});

【讨论】：

太棒了！我只是希望我能再 +1 一点。无论如何，谢谢！ :)

【解决方案2】：

您可以使用.stop()，也可以使用外部容器位置

$(document).ready(function() {
    $('.slider').hover(
        /* mouseover */
        function(){
            $(this).stop().animate({
                    top : $('.outer').position().top
            }, 300);
        },
        /* mouseout*/
        function(){
            $(this).stop().animate({
                top : $('.outer').position().top + 120
            }, 300);
        }
    );
});

DEMO

希望对你有帮助

【讨论】：

在您的演示中，它似乎已经解决了弹跳问题，但它往往会滑出视野......：P
更新了演示。注意到滑块位置是相对的，因此使用外部容器的位置可能有助于当前情况

【解决方案3】：

无法重现您的问题，但我相信 hover 被多次调用。要解决此问题，您可以检查 div 是否已在动画中。如果是，则不要再次运行另一个动画。

添加以下代码来检查 div 是否已经“动画化”：

if ($(this).is(':animated')) {
   return;
}

代码：http://jsfiddle.net/W5EsJ/2/
参考：http://api.jquery.com/animated-selector/

【讨论】：

它似乎在你的小提琴中消失了

【解决方案4】：

我理解了这个问题并重现了它，它发生在从下往上悬停时。鼠标悬停是导致问题的原因，因为当鼠标悬停在图像上时将调用动画函数。你需要通过鼠标进入和离开来控制这里发生的事情，查看一个类似的例子：Jquery Animate on Hover

【讨论】：

【解决方案5】：

之所以会这样，是因为悬停正在排队，导致它多次上下滑动。有一个名为 hoverIntent 的插件可以解决这个问题。 http://cherne.net/brian/resources/jquery.hoverIntent.html

如果您决定使用 hoverIntent，您唯一需要在代码中更改的是 .hover > .hoverIntent

【讨论】：