How to run two animations simultaneously in jQuery ?
Last Updated :
22 Apr, 2020
The .animate() method in jQuery is used to handle effects and animations. Properties which have numeric values can be animated by this method such as width, height, border-width etc. however, the property names should be camel cased( eg. borderWidth). Usually, if different animations are chained on the same html element, jQuery adds them to a queue and they are executed sequentially. In this article, we will discuss how we can make such animations simultaneously. The animate() method will only trigger after the event (being listened to) occurs on the page. For two different HTML elements, on triggering of an event, the animations will occur simultaneously.
According the official jQuery documentation, the .animate() method offers two prototypes:
- .animate( properties, [ duration ], [ easing ], [ complete ] ): Properties are the plain javascript object of css properties followed by an integer, a string and a boolean value for the rest.
- .animate( properties, options ): Both properties and options are plain javascript objects. The options object can be passed with an optional ‘queue’ property which can allow us to choose whether we want the chained animations to be added to the queue or not. We will use the second prototype for the purpose of this example.
The following code demonstrates how chaining animations would look like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<title>Document</title>
</head>
<body>
<div class="button">
<button id="bt1">Hey Geeks</button>
</div>
<style>
button{
background-color: rgb(31, 156, 0);
border: none;
color: white;
font-size: 20px;
}
</style>
<script type="text/javascript">
$(document).ready( ()=>{
// Event listener to recognise click
// Animations will occur sequentially
// and will be added to queue
$('#bt1').on('click', () => {
$('#bt1').animate({fontSize : '40px'}, {duration : 1000})
.animate({width : '300px'}, {duration : 1000})
.animate({height : '300px' }, {duration : 1000});
});
});
</script>
</body>
</html>
|
In the above example, we have chained three animations to the HTML button element. The animations trigger on click. The same would’ve happened for the following set of code:
$(document).ready( ()=>{
$('#bt1').on('click', () => {
$('#bt1').animate({fontSize : '30px'}, {duration : 1000})
$('#bt1').animate({width : '300px'}, {duration : 1000})
$('#bt1').animate({height : '300px' }, {duration : 1000});
});
});
|
Output:
We can cause the animations to trigger simultaneously in two ways.
Method 1: Using ‘QUEUE’ Property in options
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<script src=
integrity=
"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<title>Document</title>
</head>
<body>
<div class="button">
<button id="bt1">Button1</button>
</div>
<style>
button{
background-color: rgb(31, 156, 0);
border: none;
color: white;
font-size: 20px;
}
</style>
<script type="text/javascript">
$(document).ready( ()=>{
/* Animations will not be added to queue
and hence occur simultaneously*/
$('#bt1').on('click', () => {
$('#bt1').animate({fontSize : '60px'},
{duration : 1000, queue : false})
.animate({width : '300px'},
{duration : 1000, queue : false})
.animate({height : '300px' },
{duration : 1000, queue : false});
});
});
</script>
</body>
</html>
|
Output:
By passing the option queue : false, we ensure that the animations do not get added to the queue. The default animation queue in jQuery is called fx. The above method is especially useful when you want certain animations to happen simultaneously and certain animations to occur sequentially with better readability of code. By default, queue is true.
Method 2: Passing all the css properties in a single object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<script src=
integrity=
"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<title>Document</title>
</head>
<body>
<div class="button">
<button id="bt1">Button1</button>
</div>
<style>
button{
background-color: rgb(31, 156, 0);
border: none;
color: white;
font-size: 20px;
}
</style>
<script type="text/javascript">
$(document).ready( ()=>{
/* All the animations have been passed
as a single object and hence will
occur simultaneously*/
$('#bt1').on('click', () => {
$('#bt1').animate({
fontSize : '60px',
width : '300px',
height : '300px'
},
{duration : 1000})
});
});
</script>
</body>
</html>
|
Output:
Through the above two methods, the task of implementing two or more animations in jQuery can be implemented simultaneously as opposed to placing them in the queue and executing them sequentially.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...