Skip to content

Commit 4648c9b

Browse files
committed
[fixes]
1 parent eb8623b commit 4648c9b

File tree

1 file changed

+15
-35
lines changed

1 file changed

+15
-35
lines changed

page/effects/queue-and-dequeue-explained.md

Lines changed: 15 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -28,44 +28,24 @@ $( ".box" )
2828
}, "slow")
2929
.queue( function() {
3030
$( "#title" ).html( "We're in the animation, baby!" );
31-
} );
32-
33-
```
3431
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();
5034
} );
35+
5136
```
5237

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 function will execute right after the animation.
5439

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.
6141

6242
Another way of *dequeuing* is by calling the function that is passed to your callback. That function will automatically call `.dequeue()` for you.
6343

6444
```
65-
.queue( function(next) {
66-
console.log('I fired!');
45+
.queue( function( next ) {
46+
console.log( "I fired!" );
6747
next();
68-
} )
48+
} );
6949
```
7050

7151
## Custom Queues
@@ -94,16 +74,16 @@ Since queues are just a set of ordered operations, our application may have some
9474
```
9575
$( ".box" )
9676
.queue( "steps", function( next ) {
97-
console.log( "I fired" );
77+
console.log( "Will never log because we clear the queue" );
9878
next();
9979
} )
100-
.clearQueue( "steps" )
80+
.clearQueue( "steps" )
10181
.dequeue( "steps" );
10282
```
10383

10484
In this example, nothing will happen as we removed everything from the `steps` queue.
10585

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.
10787

10888
## Replacing The Queue
10989

@@ -112,16 +92,16 @@ When you pass an array of functions as second argument to `.queue()`, that array
11292
```
11393
$( ".box" )
11494
.queue( "steps", function( next ) {
115-
console.log( "I won't fire" );
95+
console.log( "I will never fire as we totally replace the queue" );
11696
next();
11797
} )
11898
.queue( "steps", [
11999
function( next ) {
120100
console.log( "I fired!" );
121101
next();
122102
}
123-
] )
124-
.dequeue( "steps" );
103+
] )
104+
.dequeue( "steps" );
125105
```
126106

127107
You can also call `.queue()` without passing it functions, which will return the queue of that element as an array.
@@ -134,5 +114,5 @@ $( ".box" ).queue( "steps", function( next ) {
134114
135115
console.log( $( ".box" ).queue( "steps" ) );
136116
137-
$('.box').dequeue( "steps" );
117+
$( ".box" ).dequeue( "steps" );
138118
```

0 commit comments

Comments
 (0)