Question

我有类似的东西：

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

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

Answer 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％。

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

1 个答案: