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

【问题标题】：Stop .hover animation when the mouse leaves in JQuery当鼠标离开 JQuery 时停止 .hover 动画
【发布时间】：2011-10-16 19:55:15
【问题描述】：

我有类似的东西：

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

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

你正在寻找stop():

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

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

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

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

【讨论】：