jQuery .fadeOut（）; 。フェードイン（）;スパムのバグ？

Question

これが可能かどうかわかりませんが、私は3つのDIVにfadeInとOutが適用されています。ように：

$('.boxHolder1').hover(function() { 
     $('img.top1').fadeOut(400); 
    },function() { 
     $('img.top1').fadeIn(400); 
    }); 
    $('.boxHolder2').hover(function() { 
     $('img.top2').fadeOut(400); 
    },function() { 
     $('img.top2').fadeIn(400); 
    }); 
    $('.boxHolder3').hover(function() { 
     $('img.top3').fadeOut(400); 
    },function() { 
     $('img.top3').fadeIn(400); 
    }); 

私の質問。

このコードをより効率的にするためにはとにかく、私のマウスでDIVをスパムすると、遅れてDIVがただちにfadeInでランダムに記録されたXのホバーのようにコードを適用します。

Answer 1

あなたは以前に実行されているアニメーションを停止するためにjQueryのでstop機能を使用する必要があります。

$('.boxHolder1').hover(
    function() { $('img.top1').stop().fadeOut(400); }, 
    function() { $('img.top1').stop().fadeIn(400); }); 
$('.boxHolder2').hover(
    function() { $('img.top2').stop().fadeOut(400); }, 
    function() { $('img.top2').stop().fadeIn(400); }); 
$('.boxHolder3').hover(
    function() { $('img.top3').stop().fadeOut(400); }, 
    function() { $('img.top3').stop().fadeIn(400); }); 

Answer 2

はい、イベントハンドラの呼び出しがキューイングされています。それは確かにバグではありません。

コールバックでは、stop()を使用して、現在実行中のアニメーションを停止できます。キューに入れられたものを取り消すための最初の引数としてtrueを渡してください。trueを現在の実行中のアニメーションを停止するための第2引数としてすぐにに送ります。

$('.boxHolder3').hover(function() { 
    $('img.top3').stop(true, true).fadeOut(400); 
}, 
function() { 
    $('img.top3').stop(true, true).fadeIn(400); 
}); 

あなたは変数の狡猾を使用してコードの重複を減らすことができるかもしれないけれどもあなたは、任意のより多くの「効率的な」これを取得することはありません。

Answer 3

FADEIN/FADEOUTの前にアニメーションを停止することができます。

Ex。

$('img.top1').stop(true,true).fadeOut(400); 

これでキューがクリアされ、すぐにアニメーションが終了します。 stop（）関数の両方のパラメータを必要に応じて変更します。