0

私は 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`
4

1 に答える 1

1

ここにはいくつかの問題があります。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

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

現在のすべてのロジックをでラップすることにより.each、要素間のイベントの相互作用を回避できます。このようにして、イベントmouseenter mouseleaveとアタッチされたロジックは、そのクラスのすべての要素にバインドするのではなく、そのクラスを持つ要素の各インスタンスに分離してバインドされます。

于 2012-04-17T03:52:38.343 に答える