javascript - 使用 javascript 进行图像转换

Question

任何人都可以为javascript或jquery建议一个轻量级的褪色图像过渡。我正在考虑这样的事情：

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

html 看起来像这样：

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

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

Answer 1

用纯 CSS3 来做怎么样？使用transition, opacityand z-indexwhich will get you this effect with smooth effect

演示

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）