JavaScriptによって読み込まれた画像にフェードインを追加する

Question

JavaScriptを使用してある画像を他の画像に置き換える単純な機能があります。そして私はそれを読み込む際に消える行が1つあります。しかし、新しい画像が表示されたら、どのようにフェードインを追加できますか？

<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

です。

@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()か何かを。ここで

はあなたがchangeImage（）関数でこのようなCSS3を用いて所望を達成することができますhttps://jsfiddle.net/60x3bo8f/2/