What is jquery animate() method?
JQuery inbuilt animate() method is used to create animations.
What is the syntax of animate() ?
$(selector).animate(params,speed,easing,callback)
selector – this is the html element.
animate() – inbuilt jquery method
There are 3 optional params for animate() method.
1. params
2. speed
3. easing
4. callback
1.params
This is the css properties to be animated.
2. speed
This defines the speed of the show element.
By default this will be 400 milliseconds.
Possible values are “milliseconds”,”slow”,”fast”.
3. easing
This defines the speed of the element at different point of animation.
By default the value is “swing”.
Possible values are “swing” and “linear”.
4. callback
This defines the call back function to be executed after show operation.
Jquery tutorial for beginners !!!
Click to Learn More about – online learn jquery
1. animate() method is called.
For example, if we want to animate the height of the div element using animate() method.
The height of the ( div id=”dId-1″ ) is modified using animate() method.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Our title</title>
<style>
#dId-1{
background:#98bf21;
height:30%;
width:30%;
text-align:center;
padding: 20px;
margin: 10px;
border: 2px solid green;
font-size: 20px;
}
#dId-2{
width: 30%;
height: 30%;
text-align:center;
margin: 10px;
border: 2px solid green;
padding: 20px;
font-size: 20px;
}
.b1, .b2, .b3, .b4, .b5, .s1, .s2, .s3, .s4, .s5{
width:150px;
height:30px;
font-size: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".b1").click(function(){
$("#dId-1").animate({height:"600px"});
});
$(".b2").click(function(){
$("#dId-1").animate({height:"30%"});
});
});
</script>
</head>
<body>
<div id="dId-1">
<p class="p1">This is Paragraph1 P1</p>
<p class="p2">This is Paragraph2 P2</p>
<p class="p3">This is Paragraph3 P3</p>
<p class="p4">This is Paragraph4 P4</p>
<p class="p5">This is Paragraph5 P5</p>
</div>
<div id="dId-2">
<p>
<button class="b1">Animate</button> Animates the Height
</p>
<p>
<button class="b2">Reset</button> Back to Original Height
</p>
<div>
</body>
</html>
Output :
1. Before applying animate() effect
2. After applying animate() effect
3. After clicking Reset button, the div height is reset back to original size.
2. animate() method is called with speed,easing and callback function.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Our title</title>
<style>
#dId-1{
background:#98bf21;
height:30%;
width:30%;
text-align:center;
padding: 20px;
margin: 10px;
border: 2px solid green;
font-size: 20px;
}
#dId-2{
width: 30%;
height: 30%;
text-align:center;
margin: 10px;
border: 2px solid green;
padding: 20px;
font-size: 20px;
}
.b1, .b2, .b3, .b4, .b5, .s1, .s2, .s3, .s4, .s5{
width:150px;
height:30px;
font-size: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".b1").click(function(){
$("#dId-1").animate({height:"600px"},1000,"linear",function(){
alert("animate() method and modified the div height successfully");
});
});
$(".b2").click(function(){
$("#dId-1").animate({height:"30%"},1000,"swing",function(){
alert("reset button clicked and div height is resetted to its original height successfully");
});
});
});
</script>
</head>
<body>
<div id="dId-1">
<p class="p1">This is Paragraph1 P1</p>
<p class="p2">This is Paragraph2 P2</p>
<p class="p3">This is Paragraph3 P3</p>
<p class="p4">This is Paragraph4 P4</p>
<p class="p5">This is Paragraph5 P5</p>
</div>
<div id="dId-2">
<p>
<button class="b1">Animate</button> Animates the Height
</p>
<p>
<button class="b2">Reset</button> Back to Original Height
</p>
<div>
</body>
</html>
Output :
1. After animate() method called.
2. After reset button clicked.
