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

Question

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

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

Answer 1

.stop()没有参数只是停止动画，仍然留在队列中。在这种情况下，您还想.stop(true)清除动画队列。

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

还要注意使用.fadeTo()因为.fadeIn()和.fadeOut()快捷方式在这里有一些不良行为。 您可以在此处查看一个工作示例。

Answer 2

.stop( [clearQueue ] [, jumpToEnd ] )

将clearQueue和都设置jumpToEnd为true。

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