Problema con script de transparencia

[j_junquera]

Hola, es mi primer post en este foro, llevaba mucho sin entrar.
Mi problema es que estoy intentando hacer un script de javascript (soy novato en este leguaje) para dar transparencia gradual a una imagen, pero me da problemas porque solo saca el valor final de transparencia. Me da la impresión de que solo saca la última salida de la función al probarlo en la consola de firebug, pero no sé arreglarlo.

El código es el siguiente:

Código [Seleccionar] Expandir



//Método para que la función pare y hacerlo gradual
function sleep(milisegundos) {
  var inicio = new Date().getTime();
  while((new Date().getTime() - inicio) < milisegundos){}
}

//Método para la transparencia
function transparente(){
var elemento = document.getElementById("aqua");

        //De 0.02 en 0.02 va bajando la opacidad del elemento
for(i=1; i>=0;i=i-0.02){
elemento.style.opacity=i;
                //Espera para hacerlo gradual
sleep(200);
}
}



Espero que alguien pueda ayudarme, llevo ya mucho tiempo comiendome el tarro y googleando pero nada...

Gracias de antemano, un saludete

[Pablo Videla]

Yo que tu, trabajaría con jQuery

http://jquery-manual.blogspot.com/2012/05/generar-transparencia-con-fadeto-jquery.html

1 minuto en google xD

[j_junquera]

Si, si el problema no es poder darle la transparencia gradual, acerca de eso sí que he encontrado mil soluciones, de lo que me pica la curiosidad es de saber cómo podría hacerlo sin recurrir a nada fuera de mi código (al igual que en otros lenguajes se pueden hacer tareas asíncronas que modifiquen la GUI)...

[#!drvy]

No hagas un sleep, considera utilizar un Interval (timer) que se ejecute cada X ms y se detenga una vez el valor de i ha llegado a 10.

Código (javascript) [Seleccionar] Expandir

var gradual = function(){
  var elemento = document.getElementById("aqua");
  var i = 0;
  // Abrimos un Timer que se ejecute cada 150 ms.
  var chipiron = setInterval(function(){
     // Si el valor de i es menor o igual a nueve...
     if(i<=9){
        elemento.style.opacity="0."+i;
        i++;
     // En caso de que el valor sea mayor.
     } else {
        // Opacidad 0%
        elemento.style.opacity="1";
        // Limpiamos el Timer
        window.clearInterval(chipiron);
        // Devolvemos True.
        return true;
     }
  },150);
};

Y al reves:

Código (javascript) [Seleccionar] Expandir

function gradual(){
   var elemento = document.getElementById("aqua");
   var i = 9;
   // Abrimos un Timer que se ejecute cada 150 ms.
   var chipiron = setInterval(function(){
      // Si el valor de i es mayor o igual a 1
      if(i>=1){
         elemento.style.opacity="0."+i;
         i--;
      // En caso de que el valor sea menor
      } else {
         // Opacidad 0%
         elemento.style.opacity="1";
         // Limpiamos el Timer
         window.clearInterval(chipiron);
         // Devolvemos True.
         return true;
      }
   },150);
};

Saludos

[j_junquera]

¡Perfecto! 
Muchísimas gracias. No conocía el método setInterval y por eso hice el sleep (vengo de hacer Java, tiendo a usar lo mismo aquí), pero este me ha gustado.
Muy agradecido, de verdad. Un saludo

[eltec]

Muchas gracias, tenia un problema similar y este thread me fue muy útil

Un saludo