jQuery makes it possible to animate arbitrary CSS properties via the
$.fn.animate method. The $.fn.animate method
lets you animate to a set value, or to a value relative to the current
value.
Example 6.6. Custom effects with $.fn.animate
$('div.funtimes').animate(
{
left : "+=50",
opacity : 0.25
},
300, // duration
function() { console.log('done!'); // calback
});
Color-related properties cannot be animated with
$.fn.animate using jQuery out of the box. Color animations
can easily be accomplished by including the color
plugin. We'll discuss using plugins later in the book.
[Definition: Easing describes the manner in which an effect occurs -- whether the rate of change is steady, or varies over the duration of the animation.] jQuery includes only two methods of easing: swing and linear. If you want more natural transitions in your animations, various easing plugins are available.
As of jQuery 1.4, it is possible to do per-property easing when using the $.fn.animate method.
Example 6.7. Per-property easing
$('div.funtimes').animate(
{
left : [ "+=50", "swing" ],
opacity : [ 0.25, "linear" ]
},
300
);
For more details on easing options, see http://api.jquery.com/animate/.
Copyright Rebecca Murphey, released under the Creative Commons Attribution-Share Alike 3.0 United States license.