JavaScript: setTimeout nicht aktualisieren Wert innerhalb der Schleife

Question

Ich kenne Schließungen, IIFE.
Ich habe die anderen Antworten gelesen (sie alle verweisen auf die Verwendung von IIFE).
Warum funktioniert das nicht? https://jsfiddle.net/warkentien2/Lh10phuv/1/

: allmählich verblassen-in (in 2s)

scheint es, wie es nur einmal Rendering (mit Endwert)

var imgFade = document.getElementById('img-fade'); 
for(i = 0; i < 100; i++){ 
    (function(step) { 
    setTimeout(function() { 
     imgFade.style.opacity = (step/100); 
    }, 20); 
    })(i); 
} 

hier ist der Code

• mein Bild sollte

  EDIT: für zukünftige Leser
  betrachten alle Antworten von i = 1; to 1 <= 100, i++
  Übergang so wird es nicht

Answer 1

Eine schnelle, aber schmutzige Art und Weise wird die Multiplikation der 20 von step Rendering bei 99% stoppen. Sie legen alle Timeouts auf einmal, so diejenigen, die später höhere Verzögerung ausgeführt werden sollen:

var imgFade = document.getElementById('img-fade'); 
for(i = 0; i < 100; i++){ 
    (function(step) { 
    setTimeout(function() { 
     imgFade.style.opacity = (step/100); 
    }, step * 20); 
    })(i); 
} 

Answer 2

Heres eine andere Lösung, die Fade in einer nach dem anderen Anwendung:

var fade = function(step){ 
    imgFade.style.opacity = (step/100); 
    if(step < 100){ 
    setTimeout(function(){ fade(++step); }, 20); 
    } 
}; 

fade(0);