jQuery animate()

Introduction

"Animate" an element, by changing its height:

<!DOCTYPE html>
<html>
<head>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>//w  w w  . jav a 2 s  .c o m
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#box").animate({height: "300px"});
  });
  $("#btn2").click(function(){
    $("#box").animate({height: "100px"});
  });
});
</script>
</head>
<body>

<button id="btn1">Animate height</button>
<button id="btn2">Reset height</button>

<div id="box" style="background:red;height:100px;width:100px;margin:6px;"></div>

</body>
</html>

The animate() method performs a custom animation of a set of CSS properties.

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

Parameter	Optional	Description
styles	Required.	one or more CSS properties/values to animate. Only numeric values can be animated. String values cannot be animated, except for the strings "show", "hide" and "toggle". These values allow hiding and showing the animated element.
speed	Optional.	speed of the animation. Default value is 400 milliseconds Possible values: milliseconds (like 100, 1000, 5000, etc) "slow" "fast"
easing	Optional.	speed of the element in different points of the animation. Default value is "swing". Possible values: "swing" - moves slower at the beginning/end, faster in the middle "linear" - moves in a constant speed
callback	Optional.	A function to be executed after the animation completes.

The property names must be camel-cased when used with the animate() method.

Use paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.

Alternate Syntax

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

Parameter	Optional	Description
styles	Required.	one or more CSS properties/values to animate
options	Optional.	additional options for the animation.

Possible values for options:

Value	Data Type	Meanings
`duration`	A number	the speed of the animation
`easing`	A function	the easing function to use
`complete`	a function	executed after the animation completes
`step`	a function	executed for each step in the animation
`progress`	a function	executed after each step in the animation
`queue`	a Boolean value	specifying whether or not to place the animation in the effects queue
`specialEasing`	a map	one or more CSS properties from the styles parameter, and their corresponding easing functions
`start`	a function	executed when the animation begins
`done`	a function	executed when the animation ends
`fail`	a function	executed if the animation fails to complete
`always`	a function	executed if the animation stops without completing

Previous Next