CODEWITHSUNDEEP
javascriptjquery
user31782
user31782

Reputation: 7587

Why is my queue working without dequeue?

I have read jquery docs many times but fail to understand the dequeue method. Consider the following example: 

var div = $(".div");



div.animate({
  height: "200px"
}, 3000).queue(function(){
  console.log("3 seconds passed and I show off without dequeue");  
});
div {
  width: 300px;
  height: 100px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>

When you run this script you'd see that the function inside queue fires after 3 seconds but I have not dequeued it. jQuery says dequeue takes the function out of queue and then executes it. But if the function can execute without dequeue then what's the use dequeue?

Upvotes: 0

Views: 43

Answers (1)

Pablo Lozano
Pablo Lozano

Reputation: 10342

.dequeue() is called to keep the queue being executed, if you have two animations, the second won't be called if you don't use it. Check the next example, based on your code: the first div has .dequeue commented so only one animation is executed.

var divClass = $(".div");
divClass.animate({
  height: "50px"
}, 500).queue(function(){
 
  //$(this).dequeue();
}).animate({height: "100px"},500);

var div = $("div");
div.animate({
  height: "50px"
}, 500).queue(function(){
  
  $(this).dequeue();
}).animate({height: "100px"},500);
div {
  width: 300px;
  height: 100px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">First DIV</div>
<span>HELLO</span>
<div>Second DIV</div>

Upvotes: 1

Related Questions