滚动停止时的 JavaScript 停止动画

Javascript stop animation when scrolling stops

本文关键字：动画 JavaScript 滚动      更新时间：2023-09-26

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

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

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

小提琴

任何帮助非常感谢！

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

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

小提琴

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

使用来自另一个堆栈溢出问题的引用更新了您的 JSFiddle。

这将在发生scroll事件以及scroll事件停止时显示给您。

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

我已经用下划线的去抖动和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/

相关文章：