.dequeue()

Categories: Effects > Custom | Data | Utilities

.dequeue( [queueName ] )Returns: jQuery

Description: Execute the next function on the queue for the matched elements.

When .dequeue() is called, the next function on the queue is removed from the queue, and then executed. This function should in turn (directly or indirectly) cause .dequeue() to be called, so that the sequence can continue.

Example:

Use dequeue to end a custom queue function which allows the queue to keep going.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dequeue demo</title>
  <style>
  div {
    margin: 3px;
    width: 50px;
    position: absolute;
    height: 50px;
    left: 10px;
    top: 30px;
    background-color: yellow;
  }
  div.red {
    background-color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
 
<button>Start</button>
<div></div>
 
<script>
$( "button" ).on( "click", function() {
  $( "div" )
    .animate({ left:"+=200px" }, 2000 )
    .animate({ top:"0px" }, 600 )
    .queue(function() {
      $( this ).toggleClass( "red" ).dequeue();
    })
    .animate({ left:"10px", top:"30px" }, 700 );
});
</script>
 
</body>
</html>

Demo: