Description

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.

v1.0

This method has the form:

(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: backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent
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.

Return Value

This form returns a jQuery object.

v1.0

This method has the alternate form:

(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

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

This form returns a jQuery object.

Animate a div element, by changing its height:

$("#btn1").click(function(){
  $("#box").animate({height:"300px"});
});