Home >>jQuery Tutorial >jQuery animate() Method

jQuery animate() Method

jQuery animate() Method

jQuery animate() method in jQuery provides you a custom animation effect of CSS properties to changes an element from one state to another with CSS styles.

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

Parameter Values

Parameter Description
params – It is required. A property of CSS that the animation will move toward.
duration − This is optional parameter and is used to show how long the animation will run.
easing − This is optional parameter and is used to easing function to use for the transition.
callback − This is optional parameter and is used to a function to call once to complete the animation
Let’s take an Example of jQuery animate() Method:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#animate1").click(function(){
$("#box").animate({width: "200px"});
});
$("#animate2").click(function(){
$("#box").animate({width: "100px"});
});
});
</script>
</head>
<body>
<button id="animate1">start animation</button>
<button id="animate2">Reset animation</button>
<div id="box" style="background:blue;height:100px;width:100px;margin:6px;"></div>
</body>
</html>

Output:
Example 2:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#out").click(function(){
$("#block").animate({ 
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em", 
borderWidth: "10px"
}, 1500 );
});
$("#in").click(function(){
$("#block").animate({ 
width: "100",
opacity: 1.0,
marginLeft: "0in",
fontSize: "100%", 
borderWidth: "1px"
}, 1500 );
});
});
</script>
<style>
#block {background-color:yellow; width:80px; border:1px solid dodgerblue;}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
<button id = "out"> Out </button>
<button id = "in"> In</button>
<div id = "block">Hello</div>
</body>
</html>

Output:

Click on any of the buttons

Hello