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 :)
Comentarios
$("#myDivId").fadeOut("slow");