Javascript - avoir des problèmes avec une fonction que j'ai écrite pour fondre des images en

Question

J'ai donc écrit une fonction dont le but est de fondre une image de 0 opacité, à 1. Elle vise à augmenter l'opacité de 0.1 toutes les 100ms, pour un durée totale de 1s. La fonction appellera, et elle augmentera l'opacité, mais il semble attendre simplement 100ms et régler l'opacité à 1 immédiatement. Des idées où je vais mal? Voici les extraits de code correspondant à la fonction et les images qui devraient être fanée dans J'apprécie toute entrée =)

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

Vous mettez en attente tous les rappels pour exécuter 100ms à partir de maintenant. setInterval ne pas "empiler" ou "queue" fonctions.

De plus, la même variable num est capturée dans les fermetures que vous créez et sa valeur finale sera exécutée à chaque rappel.

Un correctif pour les problèmes serait de remplacer

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

avec

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