Добавьте изображение, загруженное 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

Вы можете написать пользовательскую функцию для FadeIn как это:

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/