Question

在我正在处理的网络应用程序中，我想创建一些滑块 div，它们将通过鼠标悬停和上下移动。 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中重新创建了行为。

有关正在发生的事情的任何想法？：）

==编辑==更新的JSFiddle

Answer 1

您可以使用.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

希望这有帮助

Answer 2

这并不完美，但添加.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");
        }
    );
});

Answer 3

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

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

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

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

Answer 4

我理解这个问题并重现它，它发生在从下往上盘旋时。使用鼠标悬停是导致问题的原因，因为当鼠标悬停在图像上时将调用动画功能。您需要使用鼠标输入和鼠标离开来控制此处发生的事情，请查看类似示例：Jquery Animate on Hover

Answer 5

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

如果您决定使用hoverIntent，则您在代码中唯一需要更改的内容是.hover＆gt; .hoverIntent

如何停止弹性JQuery动画？

5 个答案: