You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: page/effects/queue-and-dequeue-explained.md
+15-35Lines changed: 15 additions & 35 deletions
Original file line number
Diff line number
Diff line change
@@ -28,44 +28,24 @@ $( ".box" )
28
28
}, "slow")
29
29
.queue( function() {
30
30
$( "#title" ).html( "We're in the animation, baby!" );
31
-
} );
32
-
33
-
```
34
31
35
-
To add multiple functions to the queue, you can call `.queue()` multiple times.
36
-
37
-
```
38
-
$( ".box" )
39
-
.animate( {
40
-
height: 20
41
-
}, "slow" )
42
-
.queue( function() {
43
-
console.log('I fired!');
44
-
} )
45
-
.animate( {
46
-
height: 50
47
-
}, "fast" )
48
-
.queue( function() {
49
-
console.log('I fired too!');
32
+
// This tells jQuery to continue to the next item in the queue
33
+
$( this ).dequeue();
50
34
} );
35
+
51
36
```
52
37
53
-
If you ran this example, you will have seen that the last animation never runs and the last callback doesn't fire. This is because we basically never told jQuery to continue. Inside of the first queued function, you will need to call `.dequeue()` to move forward to the next function in the queue.
38
+
In this example, the queued functionwill execute right after the animation.
54
39
55
-
```
56
-
.queue( function() {
57
-
console.log('I fired!');
58
-
$( this ).dequeue();
59
-
} )
60
-
```
40
+
jQuery does not have any insight into how the queue items function, so we need to call `.dequeue()`, which tells jQuery when to move to the next item in the queue.
61
41
62
42
Another way of *dequeuing* is by calling the function that is passed to your callback. That function will automatically call `.dequeue()` for you.
63
43
64
44
```
65
-
.queue( function(next) {
66
-
console.log('I fired!');
45
+
.queue( function(next) {
46
+
console.log( "I fired!" );
67
47
next();
68
-
} )
48
+
} );
69
49
```
70
50
71
51
## Custom Queues
@@ -94,16 +74,16 @@ Since queues are just a set of ordered operations, our application may have some
94
74
```
95
75
$( ".box" )
96
76
.queue( "steps", function( next ) {
97
-
console.log( "I fired" );
77
+
console.log( "Will never log because we clear the queue" );
98
78
next();
99
79
} )
100
-
.clearQueue( "steps" )
80
+
.clearQueue( "steps" )
101
81
.dequeue( "steps" );
102
82
```
103
83
104
84
In this example, nothing will happen as we removed everything from the `steps` queue.
105
85
106
-
Another way of clearing the queue is to call `.stop( true )`. That will stop the currently running animations and will clear the queue.
86
+
Another way of clearing the queue is to call `.stop( true )`. That will stop the currently running animations and will clear the queue.
107
87
108
88
## Replacing The Queue
109
89
@@ -112,16 +92,16 @@ When you pass an array of functions as second argument to `.queue()`, that array
112
92
```
113
93
$( ".box" )
114
94
.queue( "steps", function( next ) {
115
-
console.log( "I won't fire" );
95
+
console.log( "I will never fire as we totally replace the queue" );
116
96
next();
117
97
} )
118
98
.queue( "steps", [
119
99
function( next ) {
120
100
console.log( "I fired!" );
121
101
next();
122
102
}
123
-
] )
124
-
.dequeue( "steps" );
103
+
] )
104
+
.dequeue( "steps" );
125
105
```
126
106
127
107
You can also call `.queue()` without passing it functions, which will return the queue of that element as an array.
0 commit comments