jQuery animate() method is used to create custom animations.
jQuery animate() Syntax
$(selector).animate({parameters}, speed, callback_function);
$(selector) is to select html element on which this animation effect is being applied.
parameters define the css properties that are used in animation.
speed is an optional parameter, it is used for adjusting the speed of animation. It can provided in milliseconds or “slow” or “fast”.
callback_function is also an optional parameter, it is passed as a parameter to the animate() method. It executes when the animation is finished.
jQuery animate() Example
In the following example we are animating a div block using animate() method, we have set the css properties of div block inside animate() method and we are calling this method inside button click event so when the button is clicked, the animation takes place.
Important point to Note: By default the position of all the elements in an html page is “static” which means they cannot be moved like we did in the example below, so to change the position during animation you have to first set the position of the html element to relative, fixed, or absolute. In the following example we have set the position to absolute.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '300px',
width: '200px',
height: '200px'
});
});
});
</script>
</head>
<body>
<h2>jQuery Animation example</h2>
<p>This tutorial is published on beginnersbook.com. Here
we will animate the following div block using animate() method.
We will adjust the css properties of this block using animate()
method.</p>
<button>Animate the block</button>
<div style="background:green;height:80px;width:120px;position:absolute;"></div>
</body>
</html>
Output:
Before button is clicked:
After button is clicked:
jQuery animate() using Relative Values
We can also use relative values in the animate method for example height: ‘+=150px’, this will increase the current height with 150px each time the animate method executes. Lets take the same example that we have seen above, let everything be same, we are just changing the jQuery (script part) part.
Here we are increasing the height and width of the block by 50px each time animate() method executes. This method executes when we click the button. As you can see in the output, the height and width are increased by 50px each time the button is clicked.
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '100px',
height: '+=50px',
width: '+=50px'
});
});
});
Output:
Before button is clicked:
After button is clicked:
Button is clicked once again:
jQuery animate() using pre-defined Values
We can use predefined properties such as “show”, “hide” or “toggle” in the animate() method. Lets take the same first example and change the jQuery part.
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
width: 'toggle'
});
});
});
Output:
You will notice that when you click the button, the width of the green block gradually decreases to zero and the block becomes invisible and when you click the button again, the width will gradually increase from zero to the original width of the block.
jQuery queue multiple animate() methods
When you define multiple animate() methods, the jQuery queues them in the given order so the animation takes place one by one, this brings a really cool effect in the animation. You can do lot more things with this functionality.
For example you define an animate() method where you are setting up the font size of a specific text to large and then in the second animate method() method you set the font size of that same text to normal so when this animation takes place, it will bring a popup effect to the text you have highlighted using animate() method. Lets take this example.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var para = $("p");
para.animate({fontSize: '3em'}, "slow");
para.animate({fontSize: '1em'}, "slow");
});
});
</script>
</head>
<body>
<h2>jQuery Animation example</h2>
<p>BeginnersBook.com</p>
<button>PopUp</button>
</body>
</html>
Output:
When you click on the PopUp button, it will gradually increase the font size of BeginnersBook.com text and then gradually decrease it to its original size, we have achieved this using two animate() methods.
Leave a Reply