Special Effects and Dojo

If you want a slick looking site you need to master FX. There is no better way to have great FX then to use the different features in a JavaScript library like Dojo. We will start with the basic functions in the Effects area. Interestingly, both jQuery and Dojo do a good job in this space and are very similar in both API’s and supported behaviors.

If you are a CSS junky then you need to look at dojo.animate() and jquery.animate(). These methods can animate any CSS property, so the possibilities are infinite.

In Dojo, for the most control you can check out the dojo.anim() page for the different properties:

Parameter Type Description
node DOMNode|String Can be a DOM node or the id of a node (as string) to animate CSS properties on.
properties Object
duration Integer The number of milliseconds over which the animation should run. Defaults to the global animation default duration (350ms).
easing Function An easing function over which to calculate acceleration and deceleration of the animation through its duration. A default easing algorithm is provided, but you may plug in any you wish. A large selection of easing algorithms are available in dojo.fx.easing.
onEnd Function A function to be called when the animation finishes running.
delay Integer The number of milliseconds to delay beginning the animation by. The default is 0.

Mixing the duration, delay and easing properties gives you a high level of control for the animation behavior. You can also create some pretty cool effects by making DIV’s and other DOM elements have a full transparency level and then fade them in when needed. I have mixed using the Ajax techniques to go and get new DOM contents and slowly fade them in for instance. You can then override the onEnd method to provide your own function when the animation is complete. This is very useful when you need to create a full transition effect or chain animations together to create a seamless animation among multiple effects.

Over the past few versions it looks like most of the new stuff is being added to the dojo.fx package. Things like slideTo, wipeOut, wipeIn, and Toggler are all part of the FX package. These are more basic functions similar to what is provided in jQuery, which we will talk about next.

jQuery is almost identical in FX support – the methods and signatures are almost identical. You can look at the reference of $.animate(). I actually like the jQuery API a little better because you can provide a step function to change the animation during the animation. So for instance, you could have an animation that starts off fast then eases slowly to finish – very cool.

Lastly, you can also use the higher level calls for basic animation like dojo.fadeIn(), dojo.fadeOut(), or the jQuery equivalents: $.fadeIn(), $.fadeOut(). jQuery also has some other high level cool methods like $.fadeTo() and $.fadeToggle() that could come in handy.

In the end, I think jQuery excels in more higher level functions and for the most part people will probably use them versus trying to figure out all of the various ways animate() can be called. I have personally used $.hide() and $.show() a lot because they are just so simple to call and because they support the callback function it makes it very easy to chain effects together. If you want to check out all the high level effects support in jQuery check out the effects page. I really don’t like how Dojo has some functions in base dojo and others in dojo.fx, they should deprecate the dojo.XXX transition calls and just stick with dojo.fx for consistency.

3 thoughts on “Special Effects and Dojo

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s