jquery悬停图像淡入淡出交换

Posted 2023-03-06

技术标签:

【中文标题】jquery悬停图像淡入淡出交换【英文标题】：jquery hover image fade swap 【发布时间】：2010-12-23 21:22:06 【问题描述】：

我已经在网上搜索了一段时间，试图找到编写 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。我目前在我的“服务导航”（不同类型的悬停）上悬停，但我想将它们应用于所有导航按钮，以及页脚中的社交图标。所有的悬停都是相同的——两个图像文件，一个在悬停时淡入另一个，在离开时返回。解决此问题的最佳方法是什么？可能是上述链接之一？

【问题讨论】：

【参考方案1】：

在$(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”事件。

【讨论】：

这将如何处理多个图像？我不会每次都重复这个吗？鉴于多张图像和淡入淡出效果，这似乎是我最好的答案。第二种解决方案似乎更好，因为它支持多种悬停图像效果，但不包括淡入淡出。关于如何添加它的任何想法？【参考方案2】：

您也可以使用单个背景图像并淡入和淡出透明 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"); 
        ) 
    ; 
);

【讨论】：

【参考方案3】：

Image Cross Fade Transition with jQuery 解释了一些解决方法..

【讨论】：

【参考方案4】：

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

创建两个<img>标签将一个精确定位在另一个之上（CSS 与 z-index）悬停时图像的不透明度将z-index 更高0 这使它变得透明，您可以看到底层图像当悬停结束时，不透明度再次淡入1。

完成

【讨论】：

我试过这个，但它不适用于多个图像。因为它们是绝对定位的，所以我无法分离图像。他们都躺在彼此之上。我试过了，但找不到适合我使用的方法。如果你在它们周围放另一个容器并定义它的大小，它就可以工作【参考方案5】：

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

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