jQuery animate() Method
jQuery Effect MethodsExample
"Animate" an element, by changing its height:
$("button").click(function(){
$("#box").animate({height: "300px"});
});
Try it Yourself »
Definition and Usage
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"), except for the strings "show", "hide" and "toggle". These values allow hiding and showing the animated element.
Tip: Use "+=" or "-=" for relative animations.
Syntax
(selector).animate({styles},speed,easing,callback)
| Parameter | Description |
|---|---|
| styles | Required. Specifies one or more CSS properties/values to animate. Note: The property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on. Properties that can be animated:
Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red"), except for the strings "show", "hide" and "toggle". These values allow hiding and showing the animated element. Tip: Color animations are not included in the core jQuery library. If you want to animate color, you need to download the Color Animations plugin from jQuery.com |
| speed | Optional. Specifies the speed of the animation. Default value is 400
milliseconds Possible values:
|
| easing | Optional. Specifies the speed of the element in different points of the
animation. Default value is "swing". Possible values:
|
| callback | Optional. A function to be executed after the animation completes. To learn more about callback, please read our jQuery Callback chapter |
Alternate Syntax
(selector).animate({styles},{options})
| Parameter | Description |
|---|---|
| styles | Required. Specifies one or more CSS properties/values to animate (See possible values above) |
| options | Optional. Specifies additional options for the animation. Possible values:
|
Try it Yourself - Example
Using animate() with a callback function
How to use animate() with a callback function that repeats the animation.
Alternate Syntax Example
Using the alternate syntax to specify multiple animation styles and options.
Using animate() to create a progress bar
How to use the animate() method to create a progress bar.
Add smooth scrolling to page anchors
How to use animate() to add smooth scrolling to links.
