jQuery dequeue() with Examples



The dequeue() method in jQuery is used to remove the next function from the queue and then execute the function.

Syntax

The syntax is as follows βˆ’

$(selector).dequeue(queue)

Above, the queue is the name of the queue.

Example

Let us now see an example to implement the jQuery dequeue() 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");
         div.queue(function(){
            div.dequeue();
         });
         div.animate({height: 150}, "slow");
         div.animate({left: "10",top: "100" }, "slow");
      });
   });
</script>
<style>
div {
   width:150px;
   height:150px;
   position:absolute;
   left:10px;
   top:100px;
   background-color:orange;
}
</style>
</head>
<body>
<button>Begin</button>
<div></div>
</body>
</html>

Output

This will produce the following output βˆ’

Now, click β€œBegin” βˆ’

Now, since we have used dequeue in a way, the animation looks like the initial formation βˆ’

Updated on: 2019-12-31T06:28:09+05:30

222 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements