Javascript 停止。鼠标离开JQuery时悬停动画

我有点像：

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

但是，如果用户的鼠标在动画完成之前离开，动画将继续。如果我快速反复地将鼠标悬停在该元素上，动画会在鼠标离开该元素后重复数次。如何使动画在鼠标离开元素后停止

您正在寻找：

有两个可选的布尔参数。第一个是

clearQueue

。如果设置为

false

（或省略），则更像是暂停动画而不是停止动画。下次在该对象上启动动画时，它将在继续之前完成暂停的动画和任何其他排队的动画。在您的情况下，您希望它是

true

，这将告诉它实际停止动画并清除任何排队的操作

第二个可选参数是

jumpToEnd

。如果

false

（或省略），动画将在其轨迹中停止。如果

true

，它将跳转到动画结束时对象所处的状态。你可能想省去这个，尽管这取决于你正在做的动画类型

例如，假设您正在从0%不透明度淡入到100%不透明度，当您调用

stop（）

时，您的不透明度为75%，那么您将淡入淡入到0%不透明度。如果没有

clearQueue

，对象将继续淡入100%，然后淡入0%。使用

clearQueue

，对象将在75%时停止衰减，然后立即开始衰减回0%。如果

jumpToEnd

为真，则对象将立即从75%变为100%不透明度，然后再变回0%

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