如何在悬停事件的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()since .fadeIn()和.fadeOut()shortcuts有一些不良行为. 你可以在这里看到一个有效的例子.