Using the animate() method, you can set animations to occur non-sequentially or at the same
time by passing all the CSS property changes to a single animate() method call. In the code
below, the
will animate its width and border left width at the same time.
Sample: sample98.html
Animate me!
Animate() is the base, low-level abstraction
The animate() method is the base method that is used to construct all the pre-configured
animations—e.g. hide(), slideDown(). It provides the ability to change (over time) the values
of style properties.
Here is what you need to know when using this method.
97
Only properties that take numeric values are supported. In other words, you can't
animate the value of, say, the backgroundColor property (at least not without a plugin).
Also, properties that take more than one value like backgroundPosition can’t be
animated.
You can animate CSS properties by using em and % where applicable.
Relative animations can be specified using “+=” or “-=” in front of the property value. This
would, for example, move an element positively or negatively relative to its current
position.
If you specify an animation duration of 0, the animation will immediately set the elements
to their end state.
As a shortcut, if a value of toggle is passed, an animation will simply reverse from
where it is and animate to that end.
All CSS properties set via a single animate() method will animate at the same time.