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