jQueryフェードイン/アウトクラッシュ

Question

jQueryが新しく、テキスト付きの単純なサムネイルfadeIn/fadeOutアニメーションを作成しようとしています。コードはシンプルですが、複数回ホバーすると速く応答を停止します。 .show()と.hide()の追加について

(function(){ 
    $('.boxcaption').css({'display': 'none'}) 
    $('.boxgrid.captionfull').hover(function(){ 
     $(".cover", this).stop().fadeIn(160); 
    }, function() { 
     $(".cover", this).stop().fadeOut(160); 
    }); 
})(); 

Answer 1

）。 true, trueとなります。

jQueryドキュメントでこれを非常によく説明しています。 .stop() documentation

私はこれを実証しました。

HoverFiddle

幸運！

Answer 2

どのように？

(function(){ 
    $('.boxcaption').css({'display': 'none'}) 
    $('.boxgrid.captionfull').hover(function(){ 
     $(".cover", this).stop().hide().fadeIn(160); 
    }, function() { 
     $(".cover", this).stop().show().fadeOut(160); 
    }); 
})(); 

か前にも不透明プロパティをリセットすることができます。問題は、あなたが（停止用のパラメータを使用していないです

(function(){ 
    $('.boxcaption').css({'display': 'none'}) 
    $('.boxgrid.captionfull').hover(function(){ 
     $(".cover", this).stop().css("opacity","1").fadeIn(160); 
    }, function() { 
     $(".cover", this).stop().css("opacity","0").fadeOut(160); 
    }); 
})(); 

Answer 3

オブジェクトをキャッシュしようとすると、$（ "。cover"、this） - これはjqueryがマウスをホバーするとこの要素を検索し始めます。このセレクタの背後には多くのコーディングがあります。また

最初のホバー機能から（）.stop削除しよう

(function(){ 
    //save selectors in variables 
    var l1 = $('some_selector'), l2= $('some_selector2'); 

    $('.boxcaption').css({'display': 'none'}) 
     l1.hover(function(){ 
     $(".cover", this).fadeIn(160); 
    }, function() { 
     l2.stop().fadeOut(160); 
    }); 
})();