我已经在网上搜索了一段时间，试图找到编写 jquery 脚本的最佳方法来完成这个简单的任务：在悬停时交换图像并带有优雅的淡入淡出效果。我找到了许多解决方案（有些方法既麻烦又笨重），并将其缩小到我认为最好的两个：
http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/
http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/
出于我的目的，我希望能够在一个页面上多次执行此悬停交换。该页面是http://www.vitaminjdesign.com。我目前在我的“服务导航”（不同类型的悬停）上悬停，但我想将它们应用于所有导航按钮，以及页脚中的社交图标。所有的悬停都是相同的——两个图像文件，一个在悬停时淡入另一个，在离开时返回。解决此问题的最佳方法是什么？可能是上述链接之一？
【问题讨论】：
在$(document).ready()内
$('.imgbuttonclass').hover(function(){
$(this).animate({
backgroundImage: 'img2.png'
},500);
},function(){
$(this).stop(true).animate({
backgroundImage: 'img1.png'
},500);
});
编辑
如果你只想这样做：http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/
然后使用 jthompson 的答案或仅使用该页面中的代码。如果你想使用两个单独的图像，你可能想看看这个：
http://peps.ca/blog/easy-image-rollover-script-with-jquery/
还有demo
它的作用是
它会在文档中查找任何 “img”或“input”标签的类 “罗”。翻转图像需要 命名与普通图像相同，但 最后加上“_o”。例如， “image.gif”的翻转图像将是 “image_o.gif”。全部找到后 图像标签，脚本预加载所有 翻转图像和广告 “mouseover”和“mouseout”事件。
【讨论】：
您也可以使用单个背景图像并淡入和淡出透明 div 来完成此操作。下面是一个简单的示例，可以将其扩展为针对单个图像类别自动工作：
$(document).ready( function() {
$("#mask-div")
.css({
"position": "absolute",
"width": 275,
"height": 110,
"background": "rgba(255, 255, 255, 0.5)"
})
.mouseover( function() {
$(this).fadeOut("slow");
})
;
$("#test-img").mouseout( function() {
$("#mask-div").fadeIn("slow");
});
});
运行demo可以在jsbin看到：demo-one
更新：这是一个更通用的解决方案（不完整，但显示了一些想法）：demo-two。只需将“fade-img”类添加到您想要具有此效果的任何图像。
$(document).ready( function() {
$(".fade-img")
.before("<div class='fade-div'></div>")
.each( function() {
var img = $(this);
var prev = img.prev();
var pos = img.offset();
prev.css({ "height": img.height(), "width": img.width(), "top": pos.top, "left": pos.left })
.mouseover( function() {
$(this).fadeOut("slow");
}
);
})
.mouseout( function() {
$(this).prev().fadeIn("slow");
})
;
});
【讨论】：
Image Cross Fade Transition with jQuery 解释了一些解决方法..
【讨论】：
我选择您提供的第二个链接中的解决方案。它简短、干净、简单。
<img>标签z-index）z-index 更高0
1。完成
【讨论】：
我认为这是最好的方法，因为它使用 CSS Sprites 来实现效果。 本教程和演示都说明了如何使用 CSS3 和 jQuery 来实现这一点。 看看下面：
【讨论】：