如何在悬停事件的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()快捷方式在这里有一些不良行为。 You can see a working example here

Answer 2

.stop( [clearQueue ] [, jumpToEnd ] )

将clearQueue和jumpToEnd都设置为true。

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