jquery - ホバーイベントを使用する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の使用には、ここでいくつかの望ましくない動作があることに注意してください。 ここで実際の例を見ることができます。

Answer 2

.stop（[clearQueue] [、jumpToEnd]）

との両方clearQueueをjumpToEndに設定しtrueます。

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