javascript - 当鼠标离开 JQuery 时停止 .hover 动画

Question

我有这样的东西:

$('.test').hover(
 function(){
  $(this).animate(...);
 }, function(){
  $(this).animate(...);
 }
);

但是如果用户的鼠标在动画结束前离开，动画会继续。如果我快速反复地快速悬停和取消悬停元素，则动画会在鼠标离开该元素后重复多次。鼠标离开元素后如何让动画停止？

Answer 1

您正在寻找 stop() :

$('.test').hover(
 function(){
  $(this).stop(true).animate(...);
 }, function(){
  $(this).stop(true).animate(...);
 }
);

有两个可选的 bool 参数。第一个是 clearQueue。如果设置为 false(或省略)，则更像是暂停动画而不是停止动画。下次在该对象上启动动画时，它将完成暂停的动画和任何其他排队的动画，然后再继续。在您的情况下，您希望它为 true，这将告诉它实际停止动画并清除任何排队的操作。

第二个可选参数是jumpToEnd。如果 false(或省略)，则动画停止在其轨道上。如果 true，它将跳转到对象在动画结束时所处的状态。尽管这取决于您正在执行的动画类型，但您可能希望将其排除在外。

例如，假设您正在从 0% 不透明度渐变到 100% 不透明度，并且当您调用 stop() 时您处于 75% 不透明度，然后您调用渐变到 0% 不透明度。如果没有 clearQueue，对象将继续淡化到 100%，然后淡化回 0%。使用 clearQueue，对象将在 75% 时停止淡化，然后立即开始淡化回 0%。如果 jumpToEnd 为真，对象的不透明度会立即从 75% 变为 100%，然后逐渐变回 0%。