当鼠标停留在JQuery中时，停止.hover动画 [英] Stop .hover animation when the mouse leaves in JQuery

问题描述

我有类似的东西:

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

但是，如果用户的鼠标在动画结束之前离开，则动画将继续.如果我快速重复地悬停和取消悬停该元素，则动画将在鼠标离开该元素后重复几次.鼠标离开元素后如何使动画停止播放?

But if the user's mouse leaves before the animation finishes, the animations continue. If I quickly hover and unhover the element quickly and repeatedly, the animations repeat several times after the mouse left the element. How can I make the animations stop after the mouse left the element?

推荐答案

您在寻找 stop():

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

有两个可选的布尔参数.第一个是clearQueue.如果设置为false(或省略)，则比停止动画更像是暂停动画.下次在该对象上启动动画时，它将在继续之前完成已暂停的动画以及所有其他排队的动画.在您的情况下，您希望它为true，它将告诉它实际上停止动画并清除所有排队的动作.

There are two optional boolean parameters. The first is clearQueue. If set to false (or omitted), it is more like pausing the animation than stopping it. The next time you start an animation on that object it will finish the paused animation, and any other queued up animations, before continuing. In your case you want it to be true, which will tell it to actually stop the animation and clear any queued actions.

第二个可选参数是jumpToEnd.如果为false(或省略)，则动画将停止在其轨迹中.如果true，它将跳到动画结束时对象所处的状态.尽管可能要取决于正在执行的动画类型，但您可能要忽略这一点.

The second optional parameter is jumpToEnd. If false (or omitted), the animation is stopped in its tracks. If true, it will jump to the state the object is in at the end of the animation. You probably want to leave this one out, though it depends on what types of animations you're doing.

例如，假设您正在从0％不透明逐渐变为100％不透明，并且在调用stop()时处于75％不透明，那么您将渐变称为0％不透明.没有clearQueue，对象将继续淡入100％，然后淡回到0％.使用clearQueue，对象将以75％的速度停止褪色，然后立即开始退回到0％.如果jumpToEnd为true，则对象将立即从75％的不透明度更改为100％的不透明度，然后逐渐消失为0％.

For example, suppose you are fading from 0% opacity to 100% opacity, and you are at 75% opacity when you call stop(), then you call a fade to 0% opacity. Without clearQueue, the object will continue fading to 100% and then fade back to 0%. With clearQueue, the object will stop fading at 75% then immediately start fading back to 0%. If jumpToEnd is true, the object would immediately change from 75% to 100% opacity before fading back to 0%.

这篇关于当鼠标停留在JQuery中时，停止.hover动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！