javascript - 如何停止有弹性的 JQuery 动画？

Question

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

问题是它往往会被卡住。如果将鼠标移到它上面(特别是靠近底部)，并快速将其移开，它会不断地上下滑动，直到完成 3-5 个循环才会停止。在我看来，这个问题可能与一个动画在另一个动画完成之前开始有关(例如，两个动画都试图运行，所以它们来回滑动。)

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

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

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

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

==编辑==更新的JSFiddle

Answer 1

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