确保只有一个动画被触发

Question

我在 $(window).scroll() 上 运行 制作这个动画，它大部分工作正常。

$('#el').animate({ left: toMove }, 500);

问题是如果用户滚动得太快，将触发两个动画，并且第二个动画会在第一个动画移动得足够远之前触发。我怎样才能确保在任何给定时间只有一个动画，然后其他动画会随之而来？我需要元素完全向左移动任何其他动画 运行，但我需要它们全部 运行。我尝试使用 .queue() 但找不到正确的解决方案。

Answer 1

您可以像这样使用 stop 函数来解决问题：

$('#el').stop(true, false).animate({ left: toMove }, 500);

stop 函数，当这样调用时，将清除任何等待动画的动画队列，并停止当前动画（如果有）。

编辑

如果您希望动画在再次播放之前结束，您只需调用 .stop(true, true) 即可