Javascript/JQueryを使用すると、Firefoxでフェードインします（繰り返し続けます）

Question

JS/JQueryを使用して、フェードアウトしたタイルを作成しようとしています。それからマウスを離すと元に戻すことができます。私のコードはChromeで正常に動作しますが、FireFoxでテストすると、フェードイン/アウトコマンドを実行し続けます。私は人々が$(this).stop().fadeOut(function()コードを使用する類似の状況を調べましたが、複数のフェードや情報の読み込みを行っているので、正しくアニメーションを実行できません。誰もがこれに対する解決を知っていますか？

<script> 
$(document).ready(function() 
{ 
    var hov = false; 
    $(".previewBox").mouseenter(function() 
    { 
     if(hov === false) 
     { 
      hov = true; 
      $(this).fadeOut(function() 
      { 
       $(this).load(function() 
       { 
        $(this).fadeIn(); 
       }); 
       $(this).attr("src", "Images/Portfolio/Art_Bike_Flip.png"); 
      }); 
     }; 
    }); 

    $(".previewBox").mouseleave(function() 
    { 
     if(hov === true) 
     { 
      hov = false; 
      $(this).fadeOut(function() 
      { 
       $(this).load(function() 
       { 
        $(this).fadeIn(); 
       }); 
      $(this).attr("src", "Images/Portfolio/Art_Bike_Preview.png"); 
      }); 
     }; 
    }); 
}); 
</script>`enter code here` 

Answer 1

ここにいくつかの問題があります。最初に.loadは、画像の読み込みを検出する信頼できる方法ではありません。一部のブラウザでは、イメージがキャッシュされると、ロードイベントが発生しないため、スクリプトは失敗します。 waitForImagesやimageLoadedなどのプラグインを使用する必要があります。

https://github.com/alexanderdickson/waitForImages私はこれをお勧めします。

.stop()は、場合によってはフェードをキャンセルするように見える場合は、.stop(true, true)を試してください。データと複数のフェードを読み込んでも、ちょうど良いアニメーションになるはずです。停止コマンドだけが最後のフェードに置かれるように調整する必要があります。

また、1つだけ必要なときに大量のjQueryオブジェクトを作成しています。それを1つのオブジェクトに限定することで、スクリプトを大幅に効率的にすることができます。

var previewBox = $('.previewBox'); 

次に、あなたはどこにでもいるものを使用することができます。

previewBox.mouseenter(function() 
{ 
    if(hov === false) 
    { 
     hov = true; 
     previewBox.stop().fadeOut(function(){ 
      previewBox.imagesLoaded(function... 

をお使いの場合は、クラスを使用して複数のインスタンスで、あなたは互いからあなたのイベントを分離する必要があります。あなたは要素間のイベントの相互作用を避けることができます.eachにすべてのあなたの現在のロジックをラップすることにより.each

$('.previewBox').each(function(){ 
    var previewBox = $(this); 
    previewBox.mouseenter(function(){ .... 

でこれを行うことができます。このようにして、イベントmouseenter mouseleaveとそれに付随するロジックは、そのクラスのすべての要素にバインドするのではなく、そのクラスの要素の各インスタンスに独立してバインドされます。