Question

我一直在网上搜索一段时间，试图找到编写执行这个简单任务的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。我目前在我的“服务导航”（不同类型的悬停）上盘旋，但我想将它们应用于所有导航按钮，以及页脚中的社交图标。所有的悬停都是相同的 - 两个图像文件，一个在悬停时淡入另一个，并在休假时返回。最好的方法是什么？上面的一个链接可能是吗？

Answer 1

您也可以使用单个背景图像完成此操作，并在＆amp;透明的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");
    });
});

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

Answer 2

我选择您提供的第二个链接中的解决方案。它简短，干净，简单。

创建两个<img>代码
将一个完全放在另一个上（带有z-index的CSS）
在悬停时淡化图像的不透明度z-index到0
这使它透明，您可以看到基础图像
当悬停结束时，再次将不透明度淡化为1。

完成

Answer 3

在$(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”标签 “RO”。翻转图像需要命名与普通图像相同但是最后用“_o”。例如， “image.gif”的翻转图像将是 “image_o.gif”。找到所有的后图像标签，脚本预加载所有翻转图像和广告 “mouseover”和“mouseout”事件。

Answer 4

Image Cross Fade Transition with jQuery解释了解决这个问题的一些方法..

Answer 5

我认为这是最好的方法，因为它使用CSS Sprites来实现效果。教程和演示都说明了如何使用CSS3和jQuery实现这一目标。请查看以下内容：

http://css-tricks.com/fade-image-within-sprite/

jquery悬停图像淡入淡出交换

5 个答案: