How to run two animations simultaneously in jQuery ?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

$(document).ready( ()=>{
  
    // Event listener to listen for click
    // Animations will be added to queue
    // and occur sequentially
    $('#bt1').on('click', () => {
        $('#bt1').animate({fontSize : '30px'}, {duration : 1000})
        $('#bt1').animate({width : '300px'}, {duration : 1000})
        $('#bt1').animate({height : '300px' }, {duration : 1000});
    });
});

chevron_right


Output:



We can cause the animations to trigger simultaneously in two ways.

Method 1: Using ‘QUEUE’ Property in options

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.