jQuery Animation Queue with Examples

In this article, I am going to discuss jQuery Animation Queue with Examples. Please read our previous article, where we discussed the jQuery Animate Function.

jQuery Animation Queue

When several calls to animate() method are chained together that is generally called the animation queue. By default, these calls are placed into a queue to be executed one after the other in series rather than executing all of them simultaneously in parallel. The name of this queue is fx.

Example:

Each HTML element has its own queue. In the following example, there will be 5 calls to the animate method placed in the queue of each div element. This means both div elements (.test1 & .test2) may start to execute the first call to animate method more or less at the same time. However, from the given queue the queued methods are executed one after the other in series.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <style>
    body {
      background-color: rgb(226, 225, 225);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    h1 {
      font-size: 40px;
      margin-bottom: 30px;
      padding: 30px;
      text-align: center;
      text-transform: capitalize;
      font-style: italic;
    }

    .btn {
      background-color: #1c4450;
      border: none;
      outline: none;
      color: white;
      padding: 20px 35px;
      margin: 20px;
      text-align: center;
      display: inline-block;
      font-size: 16px;
      border-radius: 10px;
      cursor: pointer;
      transition-duration: 0.4s;
      text-transform: uppercase;
    }

    .btn:hover {
      box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
        0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }

    div {
      width: 400px;
      height: 40px;
      padding: 100px 0;
      margin: 10px 0;
      text-align: center;
      font-size: 20px;
      font-weight: 400;
      border-radius: 20px;
      border: 1px solid #000;
      box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
        0 17px 50px 0 rgba(0, 0, 0, 0.19);
      position: relative;
    }

    .test1 {
      background-color: rgb(152, 255, 203);
    }

    .test2 {
      background-color: rgb(255, 253, 140);
    }

    p {
      margin: 20px;
      font-weight: bold;
      font-size: 30px;
      text-align: center;
      font-style: oblique;
    }
  </style>
</head>

<body>
  <h1>jQuery Animate Function</h1>
  <div class="test1">Hey! Beautiful People!!</div>
  <div class="test2">Hey! You are awesome!!</div>
  <button class="btn">Click to Animate The DIV</button>
  <p id="result"></p>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>

    $(document).ready(function () {
      $("button").click(function () {
        $("div.test1")
          .animate({ left: "200px" }, 1500)
          .animate({ fontSize: "24px" }, 1500)
          .animate({ fontWeight: "800" }, 1500)
          .animate({ borderWidth: "5px" }, 1500)
        $("div.test2")
          .animate({ left: "200px" }, 1500)
          .animate({ fontSize: "24px" }, 1500)
          .animate({ fontWeight: "800" }, 1500)
          .animate({ borderWidth: "5px" }, 1500)
      });
    });
  </script>
</body>
</html>

Now run the above code and you will get the following output.

Now click on the button and you will get the following output.

Now let’s discuss the .queue() method of jQuery in brief

jQuery .queue() method

The queue() method shows the queue of functions to be executed on the selected elements. A DOM element can have several queues. Most often it has only one, the “fx” queue (as mentioned above), which is the default jQuery queue.

Syntax: $(selector).queue(queueName)

Parameter: queueName: Optional. Specifies the name of the queue

Example:

Now let’s use this queue method. Here .queue() method is used to add a function to the queue of div.test1 element. So inside that function, we are printing the length of the queue which are waiting to be executed.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <style>
    body {
      background-color: rgb(226, 225, 225);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    h1 {
      font-size: 40px;
      margin-bottom: 30px;
      padding: 30px;
      text-align: center;
      text-transform: capitalize;
      font-style: italic;
    }

    .btn {
      background-color: #1c4450;
      border: none;
      outline: none;
      color: white;
      padding: 20px 35px;
      margin: 20px;
      text-align: center;
      display: inline-block;
      font-size: 16px;
      border-radius: 10px;
      cursor: pointer;
      transition-duration: 0.4s;
      text-transform: uppercase;
    }

    .btn:hover {
      box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
        0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }

    div {
      width: 400px;
      height: 40px;
      padding: 100px 0;
      margin: 10px 0;
      text-align: center;
      font-size: 20px;
      font-weight: 400;
      border-radius: 20px;
      border: 1px solid #000;
      box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
        0 17px 50px 0 rgba(0, 0, 0, 0.19);
      position: relative;
    }

    .test1 {
      background-color: rgb(152, 255, 203);
    }

    .test2 {
      background-color: rgb(255, 253, 140);
    }

    p {
      margin: 20px;
      font-weight: bold;
      font-size: 30px;
      text-align: center;
      font-style: oblique;
    }
  </style>
</head>

<body>
  <h1>jQuery Animate Function</h1>
  <div class="test1">Hey! Beautiful People!!</div>
  <div class="test2">Hey! You are awesome!!</div>
  <button class="btn">Click to Animate The DIV</button>
  <p id="result"></p>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $("button").click(function () {
        $("div.test1")
          .animate({ left: "200px" }, 1500)
          .queue(function () {
            $("p").html("Queued Calls :" + $(this).queue("fx").length);
          })
          .animate({ fontSize: "24px" }, 1500)
          .animate({ fontWeight: "800" }, 1500)
          .animate({ borderWidth: "5px" }, 1500)
        $("div.test2")
          .animate({ left: "200px" }, 1500)
          .animate({ fontSize: "24px" }, 1500)
          .animate({ fontWeight: "800" }, 1500)
          .animate({ borderWidth: "5px" }, 1500)
      });
    });
  </script>
</body>
</html>

Now run the above code and you will get the following output.

Now click on the button and you will get the following output.

Look at the output and let’s first understand why the queued calls are 4. So, hereafter the animation, notice that how many functions are waiting to be executed. One is the callback of .queue() method and the 3 .animate() methods. So, the queued call count is 4.

Now another thing is that after the animation, the animation stops for .test1 div. Because when we use the queue method we have to explicitly use the .dequeue() method. Then all the animations will take place.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    $("button").click(function () {
      $("div.test1")
        .animate({ left: "200px" }, 1500)
        .queue(function () {
          $("p").html("Queued Calls :" + $(this).queue("fx").length);
          $(this).dequeue();
        })
        .animate({ fontSize: "24px" }, 1500)
        .animate({ fontWeight: "800" }, 1500)
        .animate({ borderWidth: "5px" },1500)
      $("div.test2")
        .animate({ left: "200px" }, 1500)
        .animate({ fontSize: "24px" }, 1500)
        .animate({ fontWeight: "800" }, 1500)
        .animate({ borderWidth: "5px" }, 1500)
    });
  });
</script>

With the above script in place, run the code and click on the button and you will see the following output in the browser.

Example:

Now again modify the script section as shown below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    $("button").click(function () {
      $("div.test1")
        .animate({ left: "200px" }, 1500)
        .queue(function () {
          $("p").html("Queued Calls :" + $(this).queue("fx").length);
          $(this).dequeue();
        })
        .animate({ fontSize: "24px" }, 1500)
        .animate({ fontWeight: "800" }, 1500)
        .queue(function () {
          $("p").append("</br>Queued Calls :" + $(this).queue("fx").length);
          $(this).dequeue();
        })
        .animate({ borderWidth: "5px" },1500)
      $("div.test2")
        .animate({ left: "200px" }, 1500)
        .animate({ fontSize: "24px" }, 1500)
        .animate({ fontWeight: "800" }, 1500)
        .animate({ borderWidth: "5px" }, 1500)
    });
  });
</script>

With the above script in place, run the code and then click on the button and you will get the following output. When we add another .queue() after the 3^rd animation, notice that the queued call length is 2 because one is the callback and the last .animate() function is waiting to be executed.

In all these examples the animations are executing in a queue one after another in the series. If you want to perform those simultaneously you have to use the option {queue:false} while using method chaining. In that case, you have to use the alternate syntax of the animate method.

N.B- In the previous article we have seen that if you include those CSS properties in an object then also animations will execute simultaneously.

Example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    $("button").click(function () {
      $("div.test1")
        .animate({ left: "200px" }, { duration: 1500, queue: false })
        .animate({ fontSize: "24px" }, { duration: 1500, queue: false })
        .animate({ fontWeight: "800" }, { duration: 1500, queue: false })
        .animate({ borderWidth: "5px" })
      $("div.test2")
        .animate({ left: "200px" }, { duration: 1500, queue: false })
        .animate({ fontSize: "24px" }, { duration: 1500, queue: false })
        .animate({ fontWeight: "800" }, { duration: 1500, queue: false })
        .animate({ borderWidth: "5px" }, { duration: 1500, queue: false })
    });
  });
</script>

With the above script in place, run the code and click on the button and you will get the following output.

Example:

Now let’s see how to disable all the animations. To globally disable all animations you have to use
$.fx.off = true or jQuery.fx.off = true

In the below example if the checked option is true then it is going to off all the animations.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <style>
    body {
      background-color: rgb(226, 225, 225);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    h1 {
      font-size: 40px;
      margin-bottom: 30px;
      padding: 30px;
      text-align: center;
      text-transform: capitalize;
      font-style: italic;
    }

    .btn {
      background-color: #1c4450;
      border: none;
      outline: none;
      color: white;
      padding: 20px 35px;
      margin: 20px;
      text-align: center;
      display: inline-block;
      font-size: 16px;
      border-radius: 10px;
      cursor: pointer;
      transition-duration: 0.4s;
      text-transform: uppercase;
    }

    .btn:hover {
      box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
        0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }

    div {
      width: 500px;
      height: 50px;
      padding: 100px 0;
      margin: 10px 0;
      text-align: center;
      font-size: 20px;
      font-weight: 400;
      border-radius: 20px;
      border: 1px solid #000;
      box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
        0 17px 50px 0 rgba(0, 0, 0, 0.19);
      position: relative;
    }

    .test1 {
      background-color: rgb(152, 255, 203);
    }

    .test2 {
      background-color: rgb(255, 253, 140);
    }

    p {
      margin: 20px;
      font-weight: bold;
      font-size: 30px;
      text-align: center;
      font-style: oblique;
    }

    label {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 20px;
      color: rgb(75, 30, 30);
    }

    input[type="checkbox"] {
      width: 30px;
      height: 30px;
      margin-right: 10px;
      cursor: pointer;

    }
  </style>
</head>

<body>
  <h1>jQuery Animate Function</h1>
  <label for="off">
    <input type="checkbox" id="off">Disable All the Animations
  </label>
  <div class="test1">Hey! Beautiful People!!</div>
  <div class="test2">Hey! You are awesome!!</div>
  <button class="btn">Click to Animate The DIV</button>
  <p id="result"></p>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $("button").click(function () {
        $.fx.off = $('#off').is(':checked');
        $("div.test1")
          .animate({ left: "200px" }, 600)
          .animate({ fontSize: "24px" }, 600)
          .animate({ fontWeight: "800" }, 600)
          .animate({ borderWidth: "5px" }, 600)
        $("div.test2")
          .animate({ left: "200px" }, 600)
          .animate({ fontSize: "24px" }, 600)
          .animate({ fontWeight: "800" }, 600)
          .animate({ borderWidth: "5px" }, 600)

      });
    });
  </script>
</body>
</html>

Now run the above code and click on the button and you will see that the animation is working. But once you check the Disable All the Animations check box and then if you click on the button, then nothing is going to happen. Notice that no animations are happening if you check that box as shown in the below image.

In the next article, I am going to discuss how to create a simple jQuery Progress Bar with an Example. Here, in this article, I try to explain jQuery Animation Queue with Examples and I hope you enjoy this jQuery Animation Queue article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.