jquery悬停图像淡入淡出交换

问题描述

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

I have been searching online for awhile, trying to find the best way to write a jquery script that does this simple task: swapping an image on hover with an elegant fade effect. I have found many solutions (some way to cumbersome and clunky), and narrowed it down to what I see as the two best:

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.我目前在服务导航"(不同类型的悬停)上悬停，但我想将它们应用于所有导航按钮以及页脚中的社交图标.所有的悬停都是相同的——两个图像文件，一个在悬停时淡入另一个，在离开时返回.解决此问题的最佳方法是什么?可能是上述链接之一?

For my purposes, I want to be able to do this hover swap numerous times on one page. The page is http://www.vitaminjdesign.com. I currently have hovers on my "services nav" (different type of hover) but I want to apply them to all of the nav buttons, as well as the social icons in the footer. All of the hovers will be the same- two image files, one fading in to the other on hover, and returning on leave. What is the best possible way to go about this? One of the above links perhaps?

推荐答案

您也可以使用单个背景图像来完成此操作，并淡入 &出一个透明的div.下面是一个简单的示例，可以将其扩展为针对单个图像类别自动工作:

You could also accomplish this using a single background image, and fading in & out a transparent div. Here's a quick example, which could be extended to work automatically for a single class of image:

$(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

Running demo can be seen at jsbin: demo-one

更新:这是一个更通用的解决方案(不完整，但显示了一些想法):demo-two .只需将fade-img"类添加到您想要具有此效果的任何图像.

UPDATE: Here is a more generic solution (incomplete, but shows some ideas): demo-two . Just add the class "fade-img" to any image you want to have this effect.

$(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");
        })
    ;
});

这篇关于jquery悬停图像淡入淡出交换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！