jQuery的悬停图像淡入淡出 [英] jquery hover image fade swap

问题描述

我在网上搜索了一段时间，试图找到最好的方法来编写一个jquery脚本来完成这个简单的任务：使用优雅的淡入淡出效果在悬停时交换图像。我找到了很多解决方案（某些麻烦笨重的方法），并将其缩小到我认为最好的两个： /designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/rel =noreferrer> http://designwoop.com/2009/08/image-hover-effect-using-jquery-教程/

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

为了我的目的，我希望能够在一页上做这个悬停多次交换。该页面是 http://www.vitaminjdesign.com 。我目前有悬停在我的服务导航（不同类型的悬停），但我想将它们应用到所有的导航按钮，以及在页脚的社会图标。所有的盘旋都是相同的 - 两个图像文件，一个在盘旋时消失，另一个在休假时返回。什么是最好的方式去做这件事？其中一个上面的链接也许？

解决方案

您也可以使用单个背景图像完成此操作，出一个透明的div。这是一个简单的例子，它可以扩展为自动为单一类图像工作：

  $（document）.ready（函数（）{
 $（＃mask-div）
 .css（{
position：absolute，
width：275，
height：110，
background：rgba（255,255,255,0.5）
}）
 .mouseover（function（）{
 $（这个）.fadeOut（slow）; 
}）
; 
 $（＃test-img）。 fadeIn（slow）; 
}）; 
}）; 
  

运行演示可以在jsbin中看到： demo-one

UPDATE：这是一个更通用的解决方案（不完整，但显示了一些想法）： demo-two 。

  $（document）.ready（函数（）{
 $（。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（函数（）{
 $（this）.fadeOut（slow）; 
} 
）; 
}）
 .mouseout（function（）{
 $（this）.prev（）。fadeIn（slow）; 
}）
; 
}）; 
  

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/

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?

解决方案

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

Running demo can be seen at jsbin: demo-one

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的悬停图像淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！