Chapter 11. Animating properties

 

This chapter covers

  • The jQuery animation framework
  • Adding custom property animations

One of the most widely used of jQuery’s features is its animation functionality, which provides support for animating various properties of elements, resulting in visual changes on the web page. Besides the basic show and hide functions that provide an animated transition if a duration is specified, several slide and fade animations are also available as standard, such as slideDown and fadeIn. If you want something more exotic, you can request a custom animation to move an element to a particular position or to change its dimensions or font size by using the animate function. 

$('#myDiv').slideDown('slow');
$('#myDiv').animate({width: '20%', left: '100px'});

But the built-in animation functions can only deal with properties that contain simple values: a numeric value followed by an optional units specification, such as 200 (pixels), 2em, or 50%. To enable jQuery to work with more complicated property values, such as colors (#CCFFCC), you must define a custom animation handler that knows how to interpret an existing complex value, compute changes to that value as the animation proceeds, and set the new value back into that property.

11.1. The animation framework

11.2. Adding a custom property animation

11.3. Summary