Foro de elhacker.net

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:


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

Gracias de antemano, un saludete ;D

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

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)...

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.

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:

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

¡Perfecto!  :D
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 ;D

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

Un saludo