用javascript进行图像过渡

Question

任何人都可以为javascript或jquery推荐轻量级的褪色图像过渡。 我在想一些类似的事情：

document.getElementById("foo").src="images/robin.jpg";

html看起来像这样：

<img id="foo" src="images/batman.png"/>

这里的问题是图像不会褪色，而是立即改变。 我当然可以分别堆叠和设置两个图像的动画，但是我正在尝试替换一个图像。 只是使整理代码。 任何建议深表感谢。 谢谢！

Answer 1

用纯CSS3怎么做？ 使用transition, opacity和z-index ，可以使您获得具有平滑效果的效果

演示版

的CSS

div.wrap {
    position: relative;
    display: inline-block;
}

div.wrap img {
    position: absolute;
}

div.wrap img:nth-of-type(1) {
    opacity: 0;
    transition: opacity 3s;
}

div.wrap:hover img:nth-of-type(1) {
    z-index: 2;
    opacity: 1;
}

div.wrap img:nth-of-type(2) {
    opacity: 1;
    transition: opacity 3s;
}

div.wrap:hover img:nth-of-type(2) {
    opacity: 0;
}

更新2：最初我使用z-index但我认为我们也不需要。

演示2 （无z-index ）