Javascript - 画像をフェードインするために書いた関数に問題がある

Question

私は0の不透明度から1までの画像をフェードインすることを目的とした関数を書いています。これは100msごとに不透明度を0.1ずつ増加させることを意味します。総継続時間は1秒です。この関数は呼び出して不透明度を上げますが、単純に100ms待って不透明度を1に直接設定するようです。私が間違っているアイデアは？ 。ここでは）=のコードは、私は、任意の入力に感謝フェードインする必要がある機能と画像に関連するスニペット

Javascriptを以下のとおりです。

function setOpacity(id, num) { 
    document.getElementById(id).style.opacity = num; 
} 

function imagePopUp(id){ 
    var step = 0.0; 

    for(var i = 1; i <= 10; i++){ 
     step = i/10; 
     var num = step.toFixed(1); 
     setTimeout(function(){setOpacity(id, num);}, 100); 

    } 
} 

HTML：

<div id ="shadowWrapper"> 
    <div id ="imageContainer"> 
     <img class ="sideImages" src ="images/mini_race1.jpg" onclick ="imagePopUp('image1')"></img> 
     <img class ="sideImages" src ="images/mini_race2.jpg" onclick ="imagePopUp('image2')"></img> 
     <img class ="sideImages" src ="images/mini_race3.jpg" onclick ="imagePopUp('image3')"></img> 
    </div> 

      <img class ="hiddenImages" id ="image1" src ="images/race_around_ireland_01.jpg"></img> 
      <img class ="hiddenImages" id ="image2" src ="images/race_around_ireland_02.jpg"></img> 
      <img class ="hiddenImages" id ="image3" src ="images/race_around_ireland_03.jpg"></img>  
</div> 

CSS：

#imageContainer { 
    position: absolute; 
    margin-top: 10px; 
    width: 200px; 
    height: 450px; 
    left: 600px; 
} 

.sideImages { 
    display: block; 
    width: 150px; 
    height: 112px; 
    border: 1px #94b62d solid; 
    margin-top: 20px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.hiddenImages { 
    display: block; 
    position: absolute; 
    border: 1px black solid; 
    left: 100px; 
    opacity: 0.0; 
} 

Answer 1

100ms後に実行するコールバックをすべてキューに入れています。 setIntervalは、機能を「スタック」または「キュー」しません。

さらに、同じnum変数が作成中のクロージャでキャプチャされ、各コールバックで実行されるときに最終値を持ちます。

両方の問題に対する修正は

setTimeout(function(){setOpacity(id, num);}, 100); 

setTimeout(function(inum) { 
    return function(){setOpacity(id, inum);}; 
}(num), i * 100);