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

【问题标题】：How to use stop() properly in jQuery animation with hover event?如何在带有悬停事件的 jQuery 动画中正确使用 stop()？
【发布时间】：2013-01-15 00:36:20
【问题描述】：

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

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

【问题讨论】：

标签： jquery animation hover

【解决方案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 可以解决这个问题stackoverflow.com/questions/19178170/…
@NickCraver 抱歉，如果在这里寻求您的帮助，但我真的需要帮助stackoverflow.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% 不透明度闪烁然后淡出例如，在离开的情况下。