jquery悬停图像淡入淡出交换

我一直在网上搜索一段时间,试图找到编写执行这个简单任务的 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,0.5)"
        })
        .mouSEOver( function() {
             $(this).fadeOut("slow");
        })
    ;
    $("#test-img").mouSEOut( function() {
        $("#mask-div").fadeIn("slow");
    });
});

可以在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"); 
        }) 
    ; 
});