Custom Animation (^) ❘ 237
FIGURE 8-3
Custom Animation
jQuery also provides an API that facilitates custom animation using the animate() method. jQuery’s
animate() method transitions any CSS properties with numeric values over the specifi ed duration.
This makes it possible to arbitrarily animate width, height, margin, padding, border-width, or any
other property with a numeric value. The animate() method automatically pulls the starting values
from the style properties that are present when animation begins, and those properties are transi-
tioned over the specifi ed duration using the specifi ed easing algorithm.The following example, Example 8-4, demonstrates how to use the animate() method using the same
example that you used for the previous three examples. As with Example 8-3 and Example 8-2, only
the portions of the HTML document that have been changed from the other examples are provided.<label for='exampleAnimationDuration'>
Duration:
</label>
<input type='range'