jQuery animate()
Method
Example
Apply animation to an element by changing its height:
$("button").click(function(){
$("#box").animate({height:"300px"});
});
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 values are changed gradually to create an animation effect.
Only numeric values can create animations (e.g., "margin:30px"). String values cannot create animations (e.g., "background-color:red").
Tip: Use "+=" or "-=" to create relative animations.
Syntax
Parameter | Description |
---|---|
styles | Required. Specifies one or more CSS properties/values to animate. Note: <br> When used with the animate() method, the property names must be camelCase: <br> You must use paddingLeft instead of padding-left , marginRight instead of margin-right , and so on. Properties that can be animated: backgroundPositionX , backgroundPositionY , borderWidth , borderBottomWidth , borderLeftWidth , borderRightWidth , borderTopWidth , borderSpacing , margin , marginBottom , marginLeft , marginRight , marginTop , outlineWidth , padding , paddingBottom , paddingLeft , paddingRight , paddingTop , height , width , maxHeight , maxWidth , minHeight , minWidth , fontSize , bottom , left , right , top , letterSpacing , wordSpacing , lineHeight , textIndent . Tip: Color animations are not included in the core jQuery library. If you want to animate colors, you need to download the Color Animation Plugin from jQuery.com. |
speed | Optional. Specifies the speed of the animation. Possible values: milliseconds, "slow", "fast". |
easing | Optional. Specifies the speed of the element at different points of the animation. Default value is "swing". Possible values: "swing" - moves slower at the beginning/end, faster in the middle, "linear" - moves at a constant speed. Tip: More easing functions are available in extensions. |
callback | Optional. A function to be executed after the animate function completes. <br> <br>For more information about the callback, visit our jQuery Callback. |
Alternate Syntax
Parameter | Description |
---|---|
styles | Required. Specifies one or more CSS properties/values to animate (same as above). |
options | Optional. Specifies additional options for the animation. Possible values: speed - sets the speed of the animation, easing - specifies the easing function to use, callback - a function to execute after the animation completes, step - a function to execute after each step of the animation, queue - a boolean value. Indicates whether to place the animation in the effects queue. If false, the animation will start immediately, specialEasing - a map of one or more CSS properties from the styles parameter and their corresponding easing functions. |
Try It - Example
Using animate()
with a Callback Function