jquery悬停图像淡入淡出交换

我已经在网上搜索了一段时间，试图找到编写 jquery 脚本的最佳方法来完成这个简单的任务：用优雅的淡入淡出效果交换悬停时的图像。我找到了很多解决方案（有些方法很麻烦和笨重），并将其缩小到我认为最好的两个：

http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/ http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/ http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

出于我的目的，我希望能够在一个页面上多次执行此悬停交换。该页面是http://www.vitaminjdesign.com 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 http://jsbin.com/ebiva

更新：这是一个更通用的解决方案（不完整，但显示了一些想法）：demo-two http://jsbin.com/erufi。只需将“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"); 
        }) 
    ; 
});