使用CSS或jQuery将一张图片淡入另一张图片

Question

使用CSS或jQuery将一张图片淡入另一张图片

5

我需要在鼠标悬停时，淡入第二张图片并覆盖在第一张图片之上。重要的是，确保第二张图像最初不可见，直到它淡入。另一个重要的注意点是，在任何时候，两张图片都不应完全消失。我尝试了几种方法，如使用1张图片、2张图片、jquery动画和CSS过渡。

我已经阅读过可以使用jquery动画更改属性的文章？如果这是真的，那么我该如何使用jquery动画更改img标签中'src'的内容呢？

$(".image").mouseenter(function() {
        var img = $(this);
        var newSrc = img.attr("data-hover-src");

        img.attr("src",newSrc);
        img.fadeTo('slow', 0.8, function() {
            img.attr("src", newSrc);
        });
        img.fadeTo('slow', 1);
}).mouseleave(function() {
        var img = $(this);
        var newSrc = img.attr("data-regular-src");

        img.fadeTo('slow', 0.8, function() {
            img.attr("src", newSrc);
        });
        img.fadeTo('slow', 1);
});

这是我目前正在使用的内容，它是我所能找到的最接近的内容。但您可以看到图像发生了变化，这是不可取的。

- Josh

1

你尝试了什么？你有任何代码可以展示给我们吗？ - William Barbosa

2

只需将两个div浮在彼此之上，并在悬停时淡化一个。 - ssergei

1

这是你要找的吗？http://jsbin.com/fepegoce/1/edit - Hashem Qolami

我已经修改了我的答案并提供了额外的演示。 - Jon P

抱歉，您的第一个演示非常完美。现在我只是在寻找一种更动态的图像宽度/高度方法，因为我不会处理特定大小的图像。 - Josh

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jon P · Accepted Answer

使用单个带有背景图像的html元素

HTML - 没有比这更简单的了。

<div id="imgHolder"></div>

CSS

#imgHolder {
    width: 200px;
    height: 200px;
    display: block;
    position: relative;
}

/*Initial image*/
 #imgHolder::before {
    content:"";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    background-image:url(http://placehold.it/200x200);
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    z-index:10;
}

#imgHolder:hover::before {
    opacity:0;
}

#imgHolder::after {
    content:"";
    background: url(http://placehold.it/200x200/FF0000);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

演示

或者，如果您想使用图像标签...

直接从这里获取：http://css3.bradshawenterprises.com/cfimg/

HTML

<div id="cf">
  <img class="bottom" src="pathetoImg1.jpg" />
  <img class="top" src="pathetoImg2.jpg" />
</div>

CSS

#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

还有许多其他的例子可以玩耍，但这会让你入门。

最终透明度

您提到您不希望初始图像完全消失。要做到这一点，请将opacity:0更改为opacity:0.5或类似的值。您需要尝试不同的值以获得所需的结果。

具有最终透明度0.8的演示

动态图像大小

如果只使用CSS，我认为您将被困在两个图像版本中。HTML是相同的。

CSS

#cf {
    position:relative;
}

#cf img {
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

#cf img.bottom {
    z-index:-1;
    opacity:0;
    position:absolute;
    left:0;
}

#cf:hover img.top {
    opacity:0.8;
}

#cf:hover img.bottom {
    display:block;
    opacity:1;
}

Demo