javascript - JQuery 在 stop() 调用后重新启动动画

Question

我是一个 JQuery 菜鸟，试图制作一个水平滚动 div，当用户将鼠标悬停在边缘附近(特别是最左边或最右边的 10%)时，它会滚动到两侧。但是，当鼠标离开 div 时，我希望它完全停止动画。我遇到的问题是它确实停止了，但随后又立即重新启动。

Here's a JSFiddle link这说明了我的问题。将鼠标向左或向右移动 10% 的 div 可以使其滚动(一切都很好)，然后将其移回中间 80% 即可停止滚动(一切都很好)。将鼠标移出 div 会显示“EXITED”，因此我们知道它注册了 mouseleave 函数(一切都很好)，并且如果动画正在运行，动画会立即停止(一切都很好)。

但是，动画立即重新开始!我不知道为什么。它显然不会再次调用动画函数，因为“EXITED”仍然显示在底部，但我不知道它如何才能再次开始动画。

有谁知道为什么会这样吗？更重要的是，有人知道如何让动画在mouseleave之后永久停止吗？

对于奖励积分:有没有办法告诉动画“缓慢停止”而不是立即停止？

Answer 1

我认为发生这种情况是因为您在 .stop() 之后调用 .clearQueue() 而不是之前，如果您将其更改为相反的方式似乎有效:

$(this).clearQueue().stop();

<强> See this working JSFiddle