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

您正排隊所有回調，從現在開始執行100毫秒。 setInterval不具有「堆棧」或「隊列」功能。

此外，同樣的num變量在您正在創建的閉包中被捕獲，並且在每個回調中執行時它將具有其最終值。

用於這兩個問題的解決將是取代

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

與

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