viernes, enero 14, 2011

Como usar el fadeOut con Dojo

Hola, recientemente tenia la necesidad de implementar un fadeOut o lo que es lo mismo, que un div, desvaneciera!

Con YUI, sabia que se podía hacer de la siguiente manera:

setTimeout(function() {
var fadeOut = new YAHOO.util.Anim('idDelDiv', { opacity: { to: 0 } }, 0.5);
fadeOut.onComplete.subscribe(function() {
yd.setStyle('list_success_message', 'opacity', 1);
});
fadeOut.animate();
}, 4000);

Básicamente, el timeout invoca después de 4 segundos a la función anónima, que llama a la animación, que desaparece el div.

En dojo, algo parecido lo encontré en http://docs.dojocampus.org/quickstart/Animation

Básicamente se debe hacer algo así

dojo.style("idDelDiv", "opacity", "1");
dojo.fadeOut({
node: "idDelDiv",
duration: 4000,
onEnd: function(){
// executed when the animation is done
dojo.byId("idDelDiv").className = "none";
}
}).play();

el dojo.fadeOut, básicamente recibe unas propiedades donde se pueden incluir algunos triggers para los eventos, en mi caso, cuando este completo quiero colocar este class al div.
En mi caso paso el id, el tiempo (4 sec) y la función antes mencionada y le doy play para ejecutar el efecto que dura 4 segundos :)

2 comentarios:

Gabriel S. dijo...

Con JQuery también es sencillo:
$("#myDivId").fadeOut("slow");

jsanca dijo...

Jquery es de lo mejor sin duda alguna :)