jQuery animate()Method

jQuery 效果方法jQuery Effects Methods

Examples

Apply an animation to an element by changing its height:

$("button").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 using CSS styles. The CSS property values are gradually changed, thus creating an animation effect.

Only numeric values can be animated (e.g., "margin:30px"). String values cannot be animated (e.g., "background-color:red").

Tip:Use "+=" or "-=" to create relative animations.

Syntax

(selector).animate({styles},speed,easing,callback)

Parameter Description
styles Required. Specifies one or more CSS properties/values to be animated.

Note:When used with the animate() method, property names must be written in camelCase: You must use paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.

Animatable properties:

Tip:Color animation is not included in the core jQuery library. If you want to animate colors, you need to download from jQuery.comColor Animations plugin。
speed Optional. Specifies the speed of the animation.

Possible values:

  • Milliseconds
  • "slow"
  • "fast"
easing Optional. Specifies the speed of the element at different points in the animation. Default value is "swing".

Possible values:

  • "swing" - moves slowly at the beginning/end, faster in the middle
  • "linear" - moves at a constant speed
Tip:More easing functions are available in extension plugins.
callback Optional. A function to be executed after the animate function has finished.

To learn more about callback, please visit ourjQuery Callbackthis chapter.

Alternate Syntax

(selector).animate({styles},{options})

Parameter Description
styles Required. Specifies one or more CSS properties/values to be animated (same as above).
options Optional. Specifies extra options for the animation.

Possible values:

  • speed - sets the speed of the animation
  • easing - specifies the easing function to use
  • callback - specifies a function to execute after the animation completes
  • step - specifies a function to execute after each step of the animation is completed
  • queue - Boolean. Indicates whether to place the animation in the effects queue. If false, the animation will start immediately.
  • specialEasing - fromstylesa mapping of one or more CSS properties from the parameters, and their corresponding easing functions.

实例

Try it Yourself - Examples

Using animate() with a callback function
How to use animate() with a callback function to repeat animations.

jQuery 效果方法jQuery Effects Methods

Other Extensions