滚动停止时Javascript停止动画

Question

我正在尝试在用户滚动时进行动画播放并在停止时停止。
我知道javascript很少，但是从狩猎和改编开始我已经开始滚动了，但随后它继续前进，我无法弄清楚如何在滚动结束时立即停止。

这是我到目前为止所拥有的：

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

小提琴

任何帮助非常感谢！

Answer 1

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

var timer;

$(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();
};

小提琴

参考： 用户停止滚动时的事件

Answer 2

使用另一个Stack Overflow问题的引用更新了您的JSFiddle 。

当发生scroll事件和scroll事件停止时，将显示此信息。

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

Answer 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/