滚动停止时的Javascript停止动画答案

【问题标题】：Javascript stop animation when scrolling stops滚动停止时的Javascript停止动画
【发布时间】：2015-01-15 22:12:41
【问题描述】：

我正在尝试在用户滚动时播放动画并在他们停止时停止。
我对javascript知之甚少，但是从四处寻找和适应我已经让它开始滚动，但它一直在继续，我不知道如何让它在滚动结束后立即停止。

这是我目前所拥有的：

$(window).scroll(function() {
    $('#square').animate({
        top: '70px',
        queue: true,
    }, 900).animate({
        top: '5px',
        queue: true
    }, 1000);
});

Fiddle

非常感谢任何帮助！

【问题讨论】：

标签： javascript html animation scroll

【解决方案1】：

您可以按如下方式使用计时器：

var 计时器；

$(window).scroll(function() {

    clearTimeout(timer);
    timer = setTimeout( refresh , 150 );

    $('#square').animate({
        top: '70px',
        queue: true,
    }, 900).animate({
        top: '5px',
        queue: true
    }, 1000);

});

var refresh = function () { 
// do stuff
    $('#square').stop().clearQueue();
};

FIDDLE

参考：Event when user stops scrolling

【讨论】：

谢谢！这就是我所追求的。

【解决方案2】：

使用来自另一个 Stack Overflow question 的引用更新了您的 JSFiddle。

当scroll 事件发生和scroll 事件停止时，这将显示给您。

你想要的核心是$('#square').stop().clearQueue();。

【讨论】：

【解决方案3】：

我已经用下划线的 debounce 和 jquery 完成了这个：

https://github.com/michaelBenin/node-startup/blob/master/client/js/core/scroll_manager.js

要停止动画，请参阅：http://api.jquery.com/stop/

另请参阅此动画库： http://julian.com/research/velocity/

【讨论】：