Example"Animate" a div element, by changing its height:
Try it yourself » |
The animate() method performs a custom animation of a set of CSS properties.
This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect.
Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red").
Note: Use "+=" or "-=" for relative animations.
(selector).animate({styles},speed,easing,callback) |
Parameter | Description |
---|---|
styles | Required. Specifies one or more CSS properties to animate, and the values
to animate to. Note: The styles are set with DOM names (like "fontSize"), not CSS names (like "font-size"). The possible CSS style values are:
|
speed | Optional. Specifies the speed of the animation. Default is
"normal" Possible values:
|
easing | Optional. Specifies an easing function that sets the
speed in different points of the animation. Built-in easing functions are:
More easing functions are available in external plugins. |
callback | Optional. A function to be executed after the
animation completes.
To learn more about callback, visit our jQuery Callback chapter. |
(selector).animate({styles},{options}) |
Parameter | Description |
---|---|
styles | Required. Specifies one or more CSS properties to animate, and the values to animate to (See possible values above) |
options | Optional. Specifies additional options for the animation. Possible values:
|