Javascript - Probleme mit einer Funktion habe ich geschrieben, um Bilder in

Question

zu verblassen Also habe ich eine Funktion, deren Zweck ist ein Bild von 0 Opazität, auf 1 verblassen. Es soll die Opazität um 0,1 alle 100ms, für eine erhöhen Gesamtdauer von 1s. Die Funktion ruft auf und erhöht die Deckkraft, aber sie scheint einfach auf 100 ms zu warten und die Deckkraft sofort auf 1 zu setzen. Irgendwelche Ideen, wo ich falsch liege? Hier sind die Code-Schnipsel, die für die Funktion und Bilder, die in ausblendbar sollte ich schätze jede Eingabe =)

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

Sie stellen alle Callbacks für die Ausführung von 100ms in Wartestellung. setInterval nicht "stapeln" oder "Warteschlange" Funktionen.

Zusätzlich wird die gleiche Variable num in den Schließungen erfasst, die Sie erstellen, und sie wird ihren endgültigen Wert haben, wenn sie in jedem Callback ausgeführt wird.

würde eine Lösung für beide Probleme

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

mit

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