如何使用的stop（）正确jQuery的动画与悬停事件？ [英] How to use stop() properly in jQuery animation with hover event?

问题描述

我使用下面的方法做一些动画。但是，当我移动我的鼠标进出非常快，并阻止它里面的 DIV 的淡入（）没有按' ŧ工作和 DIV 保持透明。

  $（网格）。悬停（函数（）{
    $（'。gridscontrol'）停止（）淡入（200）。
}，函数（）{
    $（'。gridscontrol'）停止（）淡出（200）。
}）;
 

解决方案

.stop（） 不带参数只是停止动画，还是把它留在队列中。在这种情况下，你想要 .stop（真）清除动画队列为好。

  $（网格）。悬停（函数（）{
  $（'。gridscontrol'）停止（真）.fadeTo（200：1）。
}，函数（）{
  $（'。gridscontrol'）停止（真）.fadeTo（200，0）;
}）;
 

另外要注意使用的 .fadeTo（） 因为 .fadeIn（）和 .fadeOut（）快捷方式这里有一些不良行为。 你可以在这里看到工作的例子。

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() without parameters simply stops the animation, still leaving it in queue. In this case you want .stop(true) to clear the animation queue as well.

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

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

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