使用 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 会为您带来平滑的效果

Demo

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，但我认为我们也不需要它..

Demo 2（没有z-index）