我在网上搜索了一段时间，试图找到编写 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。我目前在“服务导航”（不同类型的悬停）上悬停，但我想将它们应用于所有导航按钮以及页脚中的社交图标。所有的悬停都是相同的——两个图像文件，一个在悬停时淡入另一个，在离开时返回。解决此问题的最佳方法是什么？可能是上述链接之一？
您还可以使用单个背景图像并淡入和淡出透明 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");
})
;
});
我选择您提供的第二个链接中的解决方案。它简短、干净、简单。
<img>标签z-index）z-index的01再次消失。完毕
Image Cross Fade Transition with jQuery explains some ways to approach this ..
里面$(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/
和演示
它的作用是
它在文档中查找任何带有“ro”类的“img”或“input”标签。翻转图像需要与普通图像命名相同，但末尾带有“_o”。例如，“image.gif”的翻转图像将是“image_o.gif”。找到所有图像标签后，脚本会预加载所有翻转图像并广告“mouseover”和“mouseout”事件。
我认为这是最好的方法，因为它使用 CSS Sprites 来实现效果。本教程和演示都说明了如何使用 CSS3 和 jQuery 来实现这一点。在下面查看：