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

我有类似的东西：

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

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

您正在寻找stop() http://api.jquery.com/stop/:

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

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

第二个可选参数是jumpToEnd. If false（或省略），动画停止在其轨道上。如果true，它会跳转到动画结束时对象所处的状态。您可能想忽略这一点，但这取决于您正在制作的动画类型。

例如，假设您从 0% 不透明度渐变到 100% 不透明度，并且当您调用时，您的不透明度为 75%stop()，然后您调用淡入淡出至 0% 不透明度。没有clearQueue，对象将继续淡出至 100%，然后淡出回 0%。和clearQueue，对象将在 75% 时停止褪色，然后立即开始褪色回 0%。如果jumpToEnd为 true 时，对象的不透明度会立即从 75% 变为 100%，然后又恢复为 0%。