logo标签列表

jQuery悬停图片淡入淡出交换

jqueryimagehoverfade
5

我已经在网上搜索了一段时间，试图找到编写 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。我目前在我的“服务导航”上设置了悬停（不同类型的悬停），但我希望将其应用于所有导航按钮，以及页脚中的社交图标。所有悬停将相同-两个图像文件，在悬停时一个图像淡入另一个图像，并在离开时返回。最好的方法是什么？也许以上两个链接之一？

5个回答
6

您也可以使用单个背景图像来实现此目的，并淡入淡出一个透明的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"); 
        }) 
    ; 
});
4

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

  • 创建两个 <img> 标签
  • 将一个图片标签完全覆盖另一个（使用 CSS 的 z-index 属性）
  • 鼠标悬停时将具有更高 z-index 值的图片标签的不透明度淡化为 0
  • 这样就会使其变成透明，看到下面的图片
  • 当鼠标悬停结束时，将不透明度淡化为 1。

完成了

我尝试过这个方法，但对于多张图片并不适用。由于它们是绝对定位的，我无法将它们分开。它们都叠放在一起。我尝试了，但无法找到适合我的解决方法。 - JCHASE11
如果你在它们周围放置另一个容器并定义其大小，它就能正常工作。 - Christian
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/

以及演示

它的作用是

它会查找文档中任何具有类名“ro”的“img”或“input”标签。鼠标悬停图片需要与普通图片同名，但结尾加上“_o”。例如，“image.gif”的鼠标悬停图片将是“image_o.gif”。在找到所有图像标签后，脚本会预加载所有鼠标悬停图片并添加“mouseover”和“mouseout”事件。

这对于多张图片会如何工作？我不需要每次都重复这个过程吧？ - JCHASE11
这似乎是我在这里给出的最佳答案，考虑到多个图像和淡入淡出效果。第二种解决方案似乎更好，因为它支持多个悬停图像效果，但它不包括淡入淡出。有什么想法如何添加呢？ - JCHASE11
1
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接