jQuery Effect - animate() Method

jQuery Effects Reference Manual

Example

Change the height of the "div" element:

$(".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 through CSS styles. The CSS property values change gradually, creating the animation effect.

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

Note:Use "+=" or "-=" to create relative animations (relative animations).

Syntax 1

$(selector).animate(styles,speed,easing,callback)
Parameters Description
styles

Required. Specifies the CSS styles and values that create the animation effect.

Possible CSS style values (with examples):

Note:CSS styles use DOM names (e.g., "fontSize") to set, not CSS names (e.g., "font-size").
speed

Optional. Specifies the animation speed. The default is "normal".

Possible values:

  • milliseconds (e.g., 1500)
  • "slow"
  • "normal"
  • "fast"
easing

Optional. Specifies the easing function to set the animation speed at different animation points.

Built-in easing functions:

  • swing
  • linear

Extended plugins provide more easing functions.
callback

Optional. The function to be executed after the animate function is executed.

For more information about callbacks, please visit our jQuery Callback This chapter.

Syntax 2

$(selector).animate(styles,options)
Parameters Description
styles Required. Specifies the CSS styles and values that produce the animation effect (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 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
  • queue - Boolean value. Indicates whether to place the animation in the effect queue. If false, the animation will start immediately
  • specialEasing - from styles Mapping of one or more CSS properties and their corresponding easing functions

jQuery Effects Reference Manual