jQuery animate()

jQuery animate() method is used to create custom animation.

Syntax

$(selector).animate( properties [, duration ] [, easing ] [, complete ] );

Specification

  • properties:An object of CSS properties and values.
  • duration:It specifies the duration of the effect.It can take the following values: "slow", "fast", or milliseconds(default:400).
  • easing:It specifies which easing function to use for the transition.It can take the following values:"linear","easeInQuad","easeOutQuad","easeInOutQuad","easeInCubic","easeInOutCubic".
  • complete:A function to call once the animation is complete.

Examples

Animate the div with multiple properties .

HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
<title>jQuery animate() Example </title>
</head>
<body>
<button id="show">Show</button> <button id="hide">hide</button> 
<div id="content">Show and Hide div</div>
</body>
</html>
Javascript
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
     width: "70%",
     opacity: 0.4,
    height:"150px",
    fontSize:"34px",
          });
    });
});   

Note:width, height, or left can be animated but background-color cannot be animated. if we want to animate font size, we would use fontSize in place of 'font-size'.

Animates a div with a relative value.

HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
<title>jQuery animate() Example </title>
</head>
<body>
<button>Click Me</button>
<div style="background:#98cf11;height:100px;width:100px;position:relative;" >
To manipulate the position, we need to set the CSS position property of the element to relative, fixed, or absolute.
</div>
</body>
</html>
Javascript
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
    left:'+=50px',
    height:'+=50px',
    width:'+=50px'
          });
    });
});