[英]Javascript stop animation when scrolling stops
I'm trying to have an animation play whilst the user is scrolling and stop when they stop. 我正在尝试在用户滚动时进行动画播放并在停止时停止。
I know very little javascript, but from hunting around and adapting I've got as far as making it start on scrolling, but then it keeps going and I can't figure out how to make it stop as soon as the scrolling ends. 我知道javascript很少,但是从狩猎和改编开始我已经开始滚动了,但随后它继续前进,我无法弄清楚如何在滚动结束时立即停止。
Here's what I have so far: 这是我到目前为止所拥有的:
$(window).scroll(function() {
$('#square').animate({
top: '70px',
queue: true,
}, 900).animate({
top: '5px',
queue: true
}, 1000);
});
Any help greatly appreciated! 任何帮助非常感谢!
You could use a timer as follows: 您可以按如下方式使用计时器:
var timer; 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();
};
Reference: 参考: Event when user stops scrolling
用户停止滚动时的事件
Updated your JSFiddle using reference from another Stack Overflow question . 使用另一个Stack Overflow问题的引用更新了您的JSFiddle 。
This will display to you when there is a scroll
event occurring and when the scroll
event stops. 当发生
scroll
事件和scroll
事件停止时,将显示此信息。
The core of what you want is $('#square').stop().clearQueue();
你想要的核心是
$('#square').stop().clearQueue();
though. 虽然。
I've accomplished this with underscore's debounce and jquery: 我用下划线的debounce和jquery完成了这个:
https://github.com/michaelBenin/node-startup/blob/master/client/js/core/scroll_manager.js https://github.com/michaelBenin/node-startup/blob/master/client/js/core/scroll_manager.js
To stop the animation see: http://api.jquery.com/stop/ 要停止动画,请参阅: http : //api.jquery.com/stop/
Also see this library for animations: http://julian.com/research/velocity/ 另请参阅此库以获取动画: http : //julian.com/research/velocity/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.