Saturday, July 25, 2009

Custom Animations with JQuery

JQuery is a great lightweight javascript library that offers a lot of powerful built-in functions and the ability to select elements with a css-like syntax. It is very useful in a variety of situations, although it does take some time to get used to. More information on JQuery can be found at the following:

• http://docs.jquery.com/How_jQuery_Works

Creating Cool Animations

There are several built-in animations that you can use in your websites, however the nicest thing about JQuery is how simple it is to create custom animations. For instance, I revamped a page that automatically scrolled a list of names:

• http://www.imta.com/agents.aspx

The animation on this page combines three different effects with the following code:

.animate({ height: 'hide', opacity: 'hide', marginTop: '-16px'}, 750);

Calling "animate" on an html element will phase in the CSS described in the brackets over a specified period (750 miliseconds in this case). It couldn't be simpler.