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）

用javascript进行图像转换

1 个答案: