滾動停止時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/