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 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.
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
When the method is changed, it goes to zero height using the standard jQuery easing and then expands using the specified easing method.
Hover over the box and then before the animation completes, quickly hover out. Do this repeatedly and watch the animations queue up.
Same as the previous one except that there is no queueing.