添加一個淡入的圖像加載JavaScript的

Question

我有一個簡單的函數，用其他人使用JavaScript替換一個圖像。加載時我有一行淡入。但是如何在新圖像顯示時添加淡入？

<script type="text/javascript"> 
 
function changeImage(a) { 
 
\t document.getElementById("Image").src = a; 
 
} 
 
</script> 
 

 
<div> 
 
\t <img src="Mini-01.jpg" onclick="changeImage('Photo-01.jpg');"> 
 
\t <img src="Mini-02.jpg" onclick="changeImage('Photo-02.jpg');"> 
 
</div> 
 

 
<div> 
 
    <img id="Image" src="Photo-01.jpg" onload="this.style.animation='fadein 2s'"> 
 
</div>

我試着使用：

onchange="this.style.animation='fadein 2s'" 

，但它不工作。

我覺得在這種情況下使用Jquery太簡單了。

你可以請我駕駛嗎？

Answer 1

可以實現使用CSS3期望這樣的changeImage（）函數。

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
 

 
.container { top: 20%; left: 20%;} 
 

 
.fade-in { 
 

 
    animation:fadeIn ease-in 1; 
 
    animation-duration:5s; 
 
}

<script type="text/javascript"> 
 
function changeImage(a) { 
 
    
 
    var elm = document.getElementById("Image"); 
 
    var clonedElm = elm.cloneNode(true); 
 
    elm.parentNode.replaceChild(clonedElm, elm); 
 
    document.getElementById("Image").src = a; 
 
    
 
} 
 
</script> 
 

 
<div> 
 
\t <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Perkin_Warbeck.jpg/200px-Perkin_Warbeck.jpg" onclick="changeImage('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Perkin_Warbeck.jpg/200px-Perkin_Warbeck.jpg');"> 
 
\t <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Leonard_Cohen_2008.jpg/200px-Leonard_Cohen_2008.jpg" onclick="changeImage('https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Leonard_Cohen_2008.jpg/200px-Leonard_Cohen_2008.jpg');"> 
 
</div> 
 

 

 
<div class="container"> 
 
    <img id="Image" src="" class="fade-in"> 
 
</div>

Answer 2

您可以編寫自定義功能淡入這樣的：

function fadeIn(el) { 
    el.style.opacity = 0; 


    var tick = function() { 
    el.style.opacity = +el.style.opacity + 0.01; 


    if (+el.style.opacity < 1) { 
     (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16) 
    } 
    }; 

    tick(); 
} 
//taken from http://stackoverflow.com/questions/23244338/pure-javascript-fade-in-function 

function changeImage(a) { 
    var el = document.getElementById("Image"); 
    el.src = a; 
    fadeIn(el) 
} 

其中el = document.getElementById()什麼的。

這裏是https://jsfiddle.net/60x3bo8f/2/