jquery Tutorial: The difference between queue and dequeue

Article Introduction: the use of queue and dequeue in jquery.

Definitions and usage
The queue () method displays or operates a function queue that executes on a matching element.
The process of queue and dequeue is mainly:
1, queues the function to join the queue (usually a function array)
2, use Dequeue to remove the first function in the function array and execute (remove and execute with the Shift () method)

It means that when you perform the dequeue again, you get another function.
It also means that if dequeue is not executed, the next function in the queue will never execute

For an element to perform the Animate method plus animation, jquery will also add it to the function queue named FX
And for multiple elements to be animated sequentially, we must set up the queue manually.

One example, two div to move to the left, click here to view
If you just rotate less, you can use the animate callback function, and one animation in the callback of another animation
Like what

$ ("#block1 ″). Animate ({left: +=100″},function () {
$ ("#block2 ″). Animate ({left: +=100″},function () {
$ ("#block1 ″). Animate ({left: +=100″},function () {
$ ("#block2 ″). Animate ({left: +=100″},function () {
$ ("#block1 ″). Animate ({left: +=100″},function () {
Alert ("Animated end");
});
});
});
});
});

But this approach is brutal when more animations are used.

Using queue and dequeue at this point is a lot simpler:

var func=[
Function () {$ ("#block1"). Animate ({left: "+=100"},ANICB);},
Function () {$ ("#block2"). Animate ({left: "+=100"},ANICB);},
Function () {$ ("#block1"). Animate ({left: "+=100"},ANICB);},
Function () {$ ("#block2"). Animate ({left: "+=100"},ANICB);},
Function () {$ ("#block1"). Animate ({left: "+=100"},ANICB);},
function () {alert ("Animated End")}
];
var anicb=function () {
$ (document). Dequeue ("Myanimation");
}
$ (document). Queue ("Myanimation", FUNC);
ANICB ();

1, I first set up an array of functions in which some columns need to be executed sequentially.
2, and then I define a callback function that uses the Dequeue method to execute the next function in the queue.
3, then put the function array on the Myanimation queue on document (you can select any element, I just put this queue on document for convenience)
4, finally I start executing the first function in the queue

The advantage of this is that the function array is linear, and it is easy to add or subtract.
Also, when you don't want to continue with the next animation (such as when a user clicks a button), you just need to clear the queue. To add more, you just need to join the queue.

Empty queues
$ (document). Queue ("Myanimation", []);
Add a new function to the last
$ (document). Queue ("Myanimation", function () {alert ("animation is really over!"). ”)});