jQuery - 滑らかなアニメーションを追加する、またはフェードイン/アウトしてトランジションクリーナーを作成する

Question

私は最近、私のサイトにjQueryを追加しました。イメージマップのセクション上を移動すると、別のdivの背景が変更され、マウスがイメージマップを離れると元に戻ります。

バックグラウンドが変更され、グリッチが発生して点滅または点滅しているように見える問題が発生します。スクリプトにフェードまたはアニメーションを追加しようとしましたが、失敗しました。誰かがコードにこれを追加する良い方法を提案できますか？

ありがとうございます！

<script type='text/javascript'> 
$(function() { 
    $(".slide2").hover(function() { 
    $("#nav2").css("background", "url(img/second.png)") 
    }); 
    $(".slide2").mouseout(function() { 
    $("#nav2").css("background", "url(img/first.png)") 
    }); 
    $(".slide3").hover(function() { 
    $("#nav2").css("background", "url(img/third.png)") 
    }); 
    $(".slide3").mouseout(function() { 
    $("#nav2").css("background", "url(img/first.png)") 
    }) 
});</script> 

Answer 1

私は、問題はそれがスクリプトにないと思いますが、それは画像をロードしています。ブラウザに新しいイメージをロードするのにかかる時間は、サーバーに要求してイメージをダウンロードしているため、イメージをあらかじめキャッシュしておく必要があります。この手法を試してみてください：sprites（最高の解決策）、またはページの最後のhtmlに挿入して画像を隠すcssを追加することもできますが、ブラウザは画像をダウンロードします。 ）。

Answer 2

これを試してみてください：

$(".slide2").mouseleave(function() { 
    $("#nav2").css("background", "url(img/first.png)").fadeOut('slow'); 
});