Buenas:
Tienes que aprender lo que es el scope o el alcance de una variable y tambien closures que es lo que te sucede aqui.
por desgracia en js no puedes hacer esto:
Cuando haces setTimeout con los parametros le estas diciendo que le pasas una función que va a llamar cuando pase un determinado tiempo... es decir no se va a ejecutar
AHORA sino cuando setTimeout considere que que ha pasado el tiempo que le has dicho. Asi que lo que estas creando internamente es como un conjunto de llamadas en espera. ¿Que pasa mientras esas llamadas esperan? pues que el valor de i cambia por que sigue recorriendo el for hasta llegar al final.
Es decir que cuando empiezan a llamarse esas funciones en realidad dentro de setTimeout o bien no saben que valor tiene i o i tendra el ultimo valor de el for.
Aqui tienes un ejemplo que te he hecho para que veas:
https://jsfiddle.net/sLd883bt/
no puedes hacer tampoco:
ya que en realidad le estas diciendo que se ejecute el codigo aparecer en el momento que asignas a setTimeout y no es lo que necesitas en todo caso tendria que ser algo asi:
o como bien lo has escrito tu:
Como se soluciona esto? pues hay algo que se llamo closures y es simplemente guardar el valor de i para que al momento que se ejecute dentro de setTimeout tenga el valor correcto. En este caso una de las formas de solucionarlo según tu código ha sido ejecutar una función (anónima) que pasa el valor de i como parámetro y así se guarda para el futuro.
Esto es una función anónima ejecutada al momento de crearla:
Fíjate que los últimos paréntesis determinar que se va a ejecutar con el parámetro que viene del for
Es muy dificil de explicar de este modo pero puedes ver los videos de este profesor en youtube que me lo explico bastante bien:
https://www.youtube.com/playlist?list=PLeHi8rVLGcYZMVCwqN2-XN8qrhWZhM1l7
Tambien como estas haciendo modificaciones de css mediante javascript te recomiendo que mires esto:
http://www.javascriptkit.com/javatutors/setcss3properties.shtml
Ya que te puedes encontrar con que la propiedad no existe o por temas del navegador tiene otro nombre (los prefijos del fabricante como -ms- -moz- .... etc).
Por ultimo ya que estas comenzando y no se si has programado anteiormente te recomiendo que te acostumbres a identar tu codigo (agregar espacios a la izquiera para que sea mas legible). En el foro hay opciones para marcar tu codigo y que resalte del texto normal que te pueden ayudar a la hora de colocar codigo en el mismo.
Espero que te sirva todo esto.
Saludos.
Actulizo comentando tu codigo a ver si se entiende mejor:
