jQuery ScrollTop：每个动画都需要在跳转到下一个之前完成

Posted 2023-05-08

【中文标题】jQuery ScrollTop：每个动画都需要在跳转到下一个之前完成

【英文标题】：jQuery ScrollTop: Each animation needs to be finished before jumping to the next one

【发布时间】：2016-10-31 06:12:54

【问题描述】：

我正在使用一个实时搜索插件，它使用scrollTop 滚动到页面上找到的文本。 该代码使用键盘箭头键up和down在结果之间进行选择，唯一的问题是由于scrollTop的动画时间，最后一个动作结果不会在前面动作的结果之前得到在代码中指定的动画时间之后还没有实现。

这意味着如果我连续按down键太多次，比如说10次，在页面上找到最后一个项目之后，即使我立即按up键，我'必须等到最后 10 个事件执行完毕，才会执行最后一个使用 up 键的事件。

$('html,body').animate(scrollTop: mark.offset().top-100, 100);

Working Fiddle

如果在动画发生的同时按下键，是否有取消上一个事件并跳转到下一个事件？

【参考方案1】：

好的，我现在看到了延迟，您需要先使用 jQuery 创建一个队列，然后在搜索改变方向时清除它：

$(element).clearQueue();   

我无法重现您描述的滞后效果。但是 jquery animate 中有一个函数可以用来实现这一点。

$(element).stop()

我更新了您的 jsFiddle 以在开始新动画之前停止之前的动画，here。

您还可以阅读有关.stop() here 的更多信息。

【讨论】：

即使在你的小提琴中，同样的问题仍然存在。进入搜索框并输入1，然后连续快速按10次向下箭头键，当您完成向下键时，立即对向上键执行相同的操作。在那里你会看到发生了什么。

不是有skip()的效果吗？这就是我想要实现的，如果触发了下一个动画，则需要跳过上一个动画。