如何停止有弹性的 JQuery 动画

How do I stop a bouncy JQuery animation?

本文关键字：JQuery 动画 有弹性 何停止      更新时间：2023-09-26

在我正在处理的Web应用程序中，我想创建一些滑块div，这些滑块将分别随着鼠标悬停和鼠标退出而上下移动。我目前使用 JQuery 的 hover() 函数实现了它，通过使用 animate() 并根据需要减少/增加它的 css 值top。实际上，这相当有效。

问题是它往往会卡住。如果您将鼠标移到它上面（尤其是在底部附近），并快速将其移除，它将连续上下滑动，并且在完成 3-5 个周期之前不会停止。对我来说，这个问题似乎与一个动画在另一个动画完成之前开始有关（例如，两个正在尝试运行，所以它们来回滑动。

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

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

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

对正在发生的事情有什么想法吗？:)

=

=编辑== 更新的 JSFiddle

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

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

如果您从下到上快速悬停，它仍然会闪烁，因为您正在将鼠标移出div，从而导致 mouseout 事件触发，从而将div 动画化回去。

您可以通过减少延迟

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

更新

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

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");
        }
    );
});
你可以使用

.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);
        }
    );
});
​

演示

希望这有帮助

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

添加以下代码段以检查div 是否已经"动画化"：

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

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

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

之所以这样，

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

如果您决定使用 hoverIntent

，则在代码中唯一需要更改的是 .hover> .hoverIntent

相关文章：