jQuery queue() method

The queue() method in jQuery is used to display the queue of functions waiting to be executed for the selected element. It is an inbuilt function in jQuery. There can be one or more function can wait to get executed. We can use the queue() method together with the dequeue() method.

There can be multiple queues to an element. But there is always a default jQuery queue that is the "fx" queue.

Syntax

The commonly used syntax of using the queue() method is given below -

The queueName mentioned in the above syntax is the optional parameter of the queue() method, which specifies the name of the queue. If it is omitted, the default value "fx" is assumed, that is, the standard effects queue.

Now, let's see an illustration to understand the concept of the queue() method.

Example

It is a simple example of using the queue() method. Here, there is a div element that starts animating on clicking the given button. On clicking the given button, the length of the queue will be displayed. We are looping the queue, so the length will change accordingly.

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var div = $("div");
    begin();
    show();

    function begin(){
$("div").animate({height: 100}, "slow").text("Welcome to the javaTpoint.com");
$("div").animate({width: 250 }, "slow");
$("div").animate({height: 50 }, "slow");
$("div").animate({width: 150 }, "slow");
$("div").animate({height: 75 }, "slow");
$("div").animate({width: 350 }, "slow", begin);

    }

    function show(){
      var i = div.queue();
      $("span").text(i.length);   
      setTimeout(show);
    }
  });
});
</script>
<style>
div {
background: lightgreen;
border: 4px dashed blue;
font-size: 25px;
height: 60px;
width: 60px;
margin-top: 15px;
}

</style>
</head>
<body>
<h3> It is an example of using the queue() method </h3>  
<button> Start Animation </button>

<p> queue length: <span> </span> </p>

<div> </div>

</body>
</html>

Test it Now

Output

After the execution of the above code, we will see the following output -