如何在带有悬停事件的 jQuery 动画中正确使用 stop()? [英] How to use stop() properly in jQuery animation with hover event?

问题描述

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

I use the method below to make some animation. But when I move my mouse in and out really fast and stop it inside the div , the fadeIn() doesn't work and the div keeps transparent.

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

推荐答案

.stop() 不带参数只会停止动画，仍将其留在队列中.在这种情况下，您希望 .stop(true) 也清除动画队列.

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

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

Also note the use of .fadeTo() since .fadeIn() and .fadeOut() shortcuts have some undesirable behavior here. You can see a working example here.

这篇关于如何在带有悬停事件的 jQuery 动画中正确使用 stop()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！