jQuery queue() with Examples

jQueryWeb DevelopmentFront End Technology

The queue() method in jQuery is used to display the queue of functions to be executed on the selected elements.

Syntax

The syntax is as follows −

$(selector).queue(queue)

Above, the parameter queue is the name of the queue.

Example

Let us now see an example to implement the jQuery queue() method 

 Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $("button").click(function(){
         var div = $("div");
         div.animate({height: 250}, "slow");
         div.animate({left: "+=200",top: "+=100" }, "slow");
         $("span").text(div.queue().length);
      });
   });
</script>
<style>
div {
   width:100px;
   height:100px;
   position:absolute;
   left:10px;
   top:100px;
   background-color:orange;
}
</style>
</head>
<body>
<button>Begin</button>
<p>Length = <span></span></p>
<div></div>
</body>
</html>

Output

This will produce the following output −

Now, click the “Begin” button to animate and get the length of the queue -

raja
Published on 31-Dec-2019 06:48:55
Advertisements