Imagina un grupo de 10 amigos. Tú quieres que cada uno entre a la habitación diga una palabra a un micrófono y luego salga de la habitación. Al final, deberá quedar grabada una frase.
Entonces tú haces esto:
A cada uno de los amigos le dices una palabra y le dices exactamente a qué hora debe entrar en la habitación. El primero entra a las 0:00:00, el segundo entra a las 0:00:05, el tercero entra a las 0:00:10, y así sucesivamente. Les das las palabras y los tiempos y ¡adelante!
Dejas pasar el rato y vas a ver la grabación. Lo que ves es que algunas palabras están en orden, otras no. La frase no tiene sentido.
Resulta que tu segundo amigo tardó un poco más de lo previsto porque su palabra era más larga y el tercero dijo la suya encima de la del segundo. El cuarto se tropezó con una silla y el quinto habló antes que él.
¿Cuál es el problema? Realmente tú lo que querías no era que el primero entrara a las 0:00:00, el segundo a 0:00:05, el tercero a 0:00:10, etc. Tú calculaste que más o menos con 5 segundos estaría bien y que si les decías esos tiempos, entonces hablarían en orden y con una separación igual todos.
Pero lo que realmente querías es que las palabras quedaran en orden. Lo que tenías que decirle a cada uno es: "Entra cuando salga el anterior".
Igual que eso, estás lanzando 8 setTimeouts en tu bucle con intervalos determinados. Peor aún! Lo que tú estás haciendo no es decir "entra a las 0:00:15" si no que al tercero le dices "Entra dentro de 15 segundos", pero en realidad ya han pasado algunos segundos desde que le dijiste al primero que entrara.
¿Qué es lo que debes hacer? Lanzar un setTimeout cada vez, y sólo uno. Ese, cuando le toque ejecutarse modificará la opacidad un poco y será el encargado de lanzar otro setTimeout.
Es decir... En una versión simplificada podría ser algo así:
Código:
function Opacity(objeto, inicio, final, duracion) {
function pasoSiguiente(obj, actual, inc, t, fin) {
nuevo = actual + inc;
obj.style.opacity = nuevo;
if ( (nuevo) < fin ) {
setTimeout(function() { pasoSiguiente(obj,nuevo,inc,t,fin); }, t);
}
}
tiempo = 100; // cada 100 milisegundos un paso
incremento = (final - inicio) / (duracion*1000/tiempo);
setTimeout(function() { pasoSiguiente(objeto,inicio,incremento,tiempo,final); }, tiempo);
}
Tendrás que adaptarlo a tu necesidad, claro.