jquery animate() method

animate

英[ˈænɪmeɪt] 美[ˈænəˌmet]

vt. To animate; to drive; to make lifelike movements; to give life to…

adj. Living; living; animated; vigorous

jquery animate() method syntax

Function:The animate() method performs custom animations of CSS property sets. This method changes an element from one state to another through CSS styles. CSS property values change gradually, allowing you to create animated effects. Only numeric values can be animated (e.g. "margin:30px"). String values cannot be animated (such as "background-color:red"). Use " =" or "-=" to create relative animations.

Syntax 1:$(selector).animate(styles,speed,easing,callback)

Parameters:

Parameters	Description
styles	Required. Specifies the CSS styles and values that produce animation effects.
speed	Optional. Specifies the speed of the animation. The default is "normal". Possible values: milliseconds (e.g. 1500) "slow" "normal" "fast"
easing	Optional. Specifies an easing function that sets the animation speed at different animation points. Built-in easing functions: More easing functions are provided in the swing linear extension.
callback	Optional. The function to be executed after the animate function is executed.

## Syntax 2:
$(selector).animate(styles,options)

Parameters:

jquery animate() method example

Parameter Description styles Required. Specifies the CSS styles and values that produce animation effects (same as above). options Optional. Specifies additional options for animation. Possible values: speed - sets the speed of the animation easing - specifies the easing function to be used callback - specifies the function to be executed after the animation is completed step - specifies the function to be executed after each step of the animation is completed queue - 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