Beginning Animations with jQuery

by Siddharth for the lovely folks at Net Tuts

A simple real world usage of the animation effects followed by demos for the article's text demonstrating a fix for animation build up and the different easing methods available.

A Simple Real World Effect

A simple example of jQuery's animation capabilities. Mouse over the image for the title and the description. Unhover and they'll go away. Hovering over the title or description morphs the background color.

Animations use easing for a little additional oomph.

ThemeForest
Image
The only place you need for site templates and themes
CodeCanyon
Image
The premier destination for scripts and code snippets

Animations without easing

Click on the link to animate the box. The box contracts to zero height and then expands back to its original height. Uses the default swing easing method.

Animate the box

Animations with easing

When the method is changed, it goes to zero height using the standard jQuery easing and then expands using the specified easing method.

Animations without the patch for queueing

Hover over the box and then before the animation completes, quickly hover out. Do this repeatedly and watch the animations queue up.

Animations with the patch for queueing

Same as the previous one except that there is no queueing.