如何在带有悬停事件的 jQuery 动画中正确使用 stop()？

Posted 2023-05-08

【中文标题】如何在带有悬停事件的 jQuery 动画中正确使用 stop()？

【英文标题】：How to use stop() properly in jQuery animation with hover event?

【发布时间】：2013-01-15 00:36:20

【问题描述】：

我使用下面的方法来制作一些动画。但是，当我快速进出鼠标并将其停在 div 内时，fadeIn() 不起作用，div 保持透明。

$(".grids").hover(function() 
    $('.gridscontrol').stop().fadeIn(200);
, function() 
    $('.gridscontrol').stop().fadeOut(200);
);

【参考方案1】：

.stop() 不带参数只会停止动画，但仍将其留在队列中。在这种情况下，您也希望.stop(true) 清除动画队列。

$(".grids").hover(function() 
  $('.gridscontrol').stop(true).fadeTo(200, 1);
, function() 
  $('.gridscontrol').stop(true).fadeTo(200, 0);
);

还要注意.fadeTo() 的使用，因为.fadeIn() 和.fadeOut() 快捷方式在这里有一些不良行为。 You can see a working example here.

【讨论】：

还是不行。如果我在fadeOut() 动画期间将鼠标移回div，它只会停止并且不会触发fadeIn() 动画。

@chbdetta - 淡入淡出的快捷方式在最新版本的 jQuery 中有一些不良影响，请改用.fadeTo() 查看更新后的答案。

嗨@NickCraver 可以解决这个问题***.com/questions/19178170/…

@NickCraver 抱歉，如果在这里寻求您的帮助，但我真的需要帮助***.com/questions/19403503/… 再次，我很抱歉评论别人的问题

【参考方案2】：

.stop( [clearQueue ] [, jumpToEnd ] )

将clearQueue 和jumpToEnd 都设置为true。

$(".grids").hover(function() 
    $('.gridscontrol').stop(true, true).fadeIn(200);
, function() 
    $('.gridscontrol').stop(true, true).fadeOut(200);
);

【讨论】：

.stop() 的第二个参数告诉它跳到队列的末尾，在悬停的情况下你真的不希望这样，因为这会触发 100% 不透明度闪烁然后淡出例如，在离开的情况下。