滚动停止时Javascript停止动画

Question

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

这是我目前所拥有的:

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

Fiddle

非常感谢任何帮助!

Answer 1

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

可变定时器；

$(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