Animation text and images can be easily done in dojo. You can change background color, show/hide an element or change location or apply build in effects. These built in effects change a number of attributes of the HTML element like font, size and opacity etc. to give the required animation effect. We shall see the sample source code and demo for animating a text message displayed inside a “div” HTML element.

The steps to add animation effect in dojo are:

1) Create the HTML element like div, button, text box or text area which is to be animated.
2) Use dojo.animateProperty to configure the animation.

Sample code

Sample code which animates a text message so that we get a fade in effect is shown below:

function animateResponseMessage() {
	dojo.animateProperty({
	    node: dojo.byId("responseMsg"), duration: 4000,
	    properties: {
		      backgroundColor: { start: "white", end: "#66CC00" }
	    }}).play();
}

The responseMsg above refers to a span element as:

<span onclick="" class="boldedbig" id="responseMsg" style="width:250px;color:white;"></span>

Note that we Now we can invoke it from any where in our javascript code.

Animation Demo

I have create a demo for this code on jsfiddle to display how the animation will look in real time. You can experiement with the code to add new animation effects.

Dojo Animation jsfiddle

Built-in Animation effects

In the above example, we just animated some specific property of a HTML span element but we can also apply some built-in effects like wipe-in, wipe-out, fade-in and fade-out etc.
For applying these effects we need to use the dojo.fx module. In fact we can also dojo.fx to animate specific properties of HTML elements.

A sample to fade out a div element is:

dojo._base.fx.fadeOut({ node: fadeTarget }).play();

In the above, code fadeTraget is the id of dom element to be animated by using the fade out effect. Just replace fadeOut with fadeIn, wipeOut, wipeIn, slideTo effects to see the various effects. Another feature of dojo based HTML animations is the call back events where we can execute custom code before, on or after the execution of animation event.

The animation sequence which can be generated by using built-in effects and property animation is totally dependent on the developer’s imagination. A good reference for various custom built animation sequence can be found at: Gruppler

Adding animations and effects in dojo admin Dojo
Animation text and images can be easily done in dojo. You can change background color, show/hide an element or change location or apply build in effects. These built in effects change a number of attributes of the HTML element like font, size and opacity etc. to give the required...
<p>Animation text and images can be easily done in dojo. You can change background color, <a href="http://www.javaexperience.com/javascript-show-hide-div/">show/hide an element</a> or change location or apply build in effects. These built in effects change a number of attributes of the HTML element like font, size and opacity etc. to give the required animation effect. We shall see the sample source code and demo for animating a text message displayed inside a "div" HTML element.</p> <p>The steps to add animation effect in dojo are: 1) Create the HTML element like div, button, text box or text area which is to be animated. 2) Use dojo.animateProperty to configure the animation. </p> <h2>Sample code</h2> Sample code which animates a text message so that we get a fade in effect is shown below: 1 The responseMsg above refers to a span element as: 1 Note that we Now we can invoke it from any where in our javascript code. <h2>Animation Demo</h2> <p> I have create a demo for this code on jsfiddle to display how the animation will look in real time. You can experiement with the code to add new animation effects. <a href=" http://jsfiddle.net/PLRfN/" target="_blank"><strong>Dojo Animation jsfiddle</strong></a> </p> <h2>Built-in Animation effects</h2> <p> In the above example, we just animated some specific property of a HTML span element but we can also apply some built-in effects like wipe-in, wipe-out, fade-in and fade-out etc. For applying these effects we need to use the dojo.fx module. In fact we can also dojo.fx to animate specific properties of HTML elements. A sample to fade out a div element is: dojo._base.fx.fadeOut({ node: fadeTarget }).play(); In the above, code fadeTraget is the id of dom element to be animated by using the fade out effect. Just replace fadeOut with fadeIn, wipeOut, wipeIn, slideTo effects to see the various effects. Another feature of dojo based HTML animations is the call back events where we can execute custom code before, on or after the execution of animation event. The animation sequence which can be generated by using built-in effects and property animation is totally dependent on the developer's imagination. A good reference for various custom built animation sequence can be found at: <a href="http://gruppler.dojotoolkit.org/" target="_blank"><strong>Gruppler</strong></a> </p>