Easy Tutorial
❮ Ajax Ajax Jq Sel Element ❯

jQuery animate() Method

jQuery Effects Methods

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


jQuery Effects Methods

❮ Ajax Ajax Jq Sel Element ❯