How to fade in and out an HTML Object w/Dojo

Mindwatering Incorporated

Author: Tripp W Black

Created: 05/07/2011 at 04:09 PM

 

Category:
Notes Developer Tips
XPages

Issue:
Would like an object (e.g.DIV) to start hidden and have fade in to 100%.
Alternately, would like to be able to fade out a DIV or other object.

Solution:
(Credit goes to Jeremy Hodge - old blog post via web search)

.startsHidden {
visibility: hidden;
}
then, add this code to your page:
dojo.addOnLoad(function(){
dojo.query(".startsHidden").style({ opacity:0 });
});
then, in your button to fadeIn() the object:
dojo.style("objectsId","visibility","visible");
dojo.fadeIn({node: "objectsId"}).play();
If you want to fade it back out, here is the code:
dojo.animateProperty({node: "objectId", properties: { opacity: 0 }, onEnd: function() { dojo.style("objectId","visibility","hidden");}}).play();



previous page