如何在hover事件的jQuery动画中正确使用stop（）？

我使用下面的方法制作一些动画。 但是当我快速移入和移出鼠标并将其停在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); });