Question

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

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

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

Fiddle

任何帮助都非常感谢！

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

<强> FIDDLE

参考： Event when user stops scrolling

Answer 2

使用其他JSFiddle的参考资料更新了 Stack Overflow question 。

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

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

Answer 3

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

滚动停止时Javascript停止动画

3 个答案: