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'); 
});