jQuery Animation Basics

animate( params, [duration], [easing], [callback] )

A function for making custom animations.

The key aspect of this function is the object of style properties that will be animated, and to what end. Each key within the object represents a style property that will also be animated (for example: “height”, “top”, or “opacity”).Note that properties should be specified using camel case, e.g. “marginLeft” instead of “margin-left.”The value associated with the key represents to what end the property will be animated. If a number is provided as the value, then the style property will be transitioned from its current state to that new number. Otherwise if the string “hide”, “show”, or “toggle” is provided, a default animation will be constructed for that property. Only properties that take numeric values are supported (e.g. backgroundColor is not supported).

As of jQuery 1.2 you can now animate properties by em and % (where applicable). Additionally, in jQuery 1.2, you can now do relative animations – specifying a “+=” or “-=” in front of the property value moves the element positively or negatively, relative to its current position.

As of jQuery 1.3 if you specify an animation duration of 0 then the animation will synchronously set the elements to their end state (this is different from old versions where there would be a brief, asynchronous, delay before the end state would be set).

Arguments:

params

A set of style attributes that you wish to animate, and to what end.

duration (Optional) String, Number

A string representing one of the three predefined speeds (“slow”, “normal”, or “fast”) or the number of milliseconds to run the animation (e.g. 1000).

easing (Optional) String

The name of the easing effect that you want to use (plugin required). There are two built-in values, “linear” and “swing”.

callback (Optional) Function

A function to be executed whenever the animation completes, executes once for each element animated against.

Go to the source

~ by axphi on August 19, 2009.