用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 ）