使用css或jquery将一个图像淡入另一个图像 [英] Fade one image into another using css or jquery

问题描述

我需要能够在悬停时初始图像上方的第二个图像中淡入。我需要确保第二张图像最初不可见，直到其淡入。另一个重要注意事项是任何图像都不应该完全淡出。我已经尝试了几种方法，例如使用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）; 
}）; 
  

这就是我目前使用的。这是我得到的最接近的。但是你可以看到图像的变化，这是不可取的。

解决方案

HTML - 并没有比这更简单

  < div id =imgHolder>< / div> 
  

CSS

  #imgHolder {
 width：200px; 
 height：200px; 
 display：block; 
职位：亲属; 
} 
 
 / *初始图片* / 
 #imgHolder :: before {
 content：; 
 top：0; 
剩下：0; 
 bottom：0; 
 right：0; 
位置：绝对; 
 background-image：url（http://placehold.it/200x200）; 
 -webkit-transition：不透明度1s缓和; 
 -moz-transition：不透明度1s缓入; 
 -o-transition：不透明1s缓入; 
过渡：不透明1s缓出; 
 z-index：10; 
} 
 
 #imgHolder：hover :: before {
 opacity：0; 
} 
 
 #imgHolder :: after {
 content：; 
 background：url（http://placehold.it/200x200/FF0000）; 
 top：0; 
剩下：0; 
 bottom：0; 
 right：0; 
位置：绝对; 
 z-index：-1; 
} 
  

Demo

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

直接偷取： http://css3.bradshawenterprises.com/cfimg/

HTML

 < div id =cf > 
< img class =bottomsrc =pathetoImg1.jpg/> 
< img class =topsrc =pathetoImg2.jpg/> 
< / div> 
  

CSS

  #cf {
 position：relative; 
 height：281px; 
 width：450px; 
 margin：0 auto; 
} 
 
 #cf img {
 position：absolute; 
剩下：0; 
 -webkit-transition：不透明度1s缓和; 
 -moz-transition：不透明度1s缓入; 
 -o-transition：不透明1s缓入; 
过渡：不透明1s缓出; 
} 
 
 #cf img.top:hover {
 opacity：0; 
} 
  

链接中还有许多其他示例可供玩耍，

最终不透明度

您提到过你不会不要让最初的形象彻底消失。要做到这一点改变 opacity：0 到 opacity：0.5 或类似的东西。您需要试验该值才能得到您想要的结果。

最终不透明度为0.8的演示

动态图片大小

我认为如果仅仅使用CSS，你会被卡在两个图像版本中。 HTML是一样的。

CSS

  #cf {
位置：相对; 
} 
 
 #cf img {
 -webkit-transition：opacity 1s ease-in-out; 
 -moz-transition：不透明度1s缓入; 
 -o-transition：不透明1s缓入; 
过渡：不透明1s缓出; 
} 
 
 #cf img.bottom {
 z-index：-1; 
 opacity：0; 
位置：绝对; 
剩下：0; 
} 
 
 #cf：hover img.top {
 opacity：0.8; 
} 
 
 #cf：hover img.bottom {
 display：block; 
 opacity：1; 
} 
  

演示

I need to be able to fade in a second image above the initial image on hover. I need to make sure that second image isn't visible initially until it fades in. The other important note is that neither of the images should fade out entirely at any time. I've tried several approaches such as using 1 image, 2 images, jquery animate and css transition.

I've read that it is possible to animate a change of attribute using jquery? If this is true, how could I animate the change of 'src' in img using jquery?

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

This is what i'm currently using. It's the closest i've gotten. But you can see the image change which is not desirable.

解决方案

Using a single html element with background images

HTML - doesn't get simpler than this

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

Demo

OR if you want to use image tags...

Stealing straight from: 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;
}

There are many other examples in the link as well to play with, but this will get you started.

Final Opacity

You've mentioned you don't want the initial image to disapear comletely. To do this change opacity:0 to opacity:0.5 or something similar. You'll need to experiment with that value to get the result you want.

Demo with final opacity of 0.8

Dynamic Image Sizes

I think you will be stuck with the two image version for this if just using CSS. HTML is the same.

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

这篇关于使用css或jquery将一个图像淡入另一个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！