用javascript进行图像过渡

Question

Can anyone suggest a lightweight fading image transition for javascript or jquery. I'm thinking something along the lines of this:

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

where the html looks like this:

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

The problem here is that the image doesn't fade, rather changes immediately. I can certainly stack and animate two images independently, but I'm trying to replace one image. Just makes for tidier code. Any advice is much appreciated. Thanks!

Answer 1

How about doing it with pure CSS3? Use transition, opacity and z-index which will get you this effect with smooth effect

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

Update 2 : Initially I used z-index but I don't think we require that too..

Demo 2 (Without z-index )