Example

"Animate" a div element, by changing its height:

$("#btn1").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").

Note: Use "+=" or "-=" for relative animations.


Syntax

(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:

  • milliseconds (like 1500)
  • "slow"
  • "normal"
  • "fast"
easing Optional. Specifies an easing function that sets the speed in different points of the animation.

Built-in easing functions are:

  • swing
  • linear

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.



Alternate Syntax

(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:

  • speed - set the speed of the animation
  • easing - specify the easing function to use
  • callback - specifies a function to be executed after the animation completes
  • step - specifies a function to be executed after each step in the animation
  • queue - a Boolean value specifying whether or not to place the animation in the effects cue
  • specialEasing - a map of one or more CSS properties from the styles parameter, and their corresponding easing functions