Details about jQuery queue control methods: queue ()/dequeue ()/clearQueue ()

First, explain the meanings of these methods.
Queue (name, [callback]):When only one parameter is passed in, it returns and points to the queue of the First Matching Element (it will be a function array, and the queue name is fx by default); when two parameters are passed in, the first parameter is the queue name of fx by default. The second parameter is divided into two cases. When the second parameter is a function, it will add a function at the end of the queue of matching elements. when the second parameter is a function array, it replaces the queue that matches the element with a new Queue (Function Array ). it may be a bit confusing to understand this. Later, I will check the DEMO later.
Dequeue (name ):This is to remove a queue function from the frontend of the queue and execute it.
ClearQueue ([queueName]):This is the new method in 1.4. clears all queues that have not been executed on the object. optional. The default value is fx. however, I personally think this method is not very useful. You can use the queue () method to pass in the second parameter of two parameters to implement the clearQueue method.
Now, we want to achieve this effect. There is a number square marked with 1 to 7, which requires the seven squares to fall from left to right. Click here to view the DEMO

I will not post the css and html parts. The DEMO shows them. If you follow the common practice, you may need to use the following jQ code: Copy codeThe Code is as follows: $ ('. one'). delay (500). animate ({top:' + = 270px '}, 500, function (){
$ ('. Two'). delay (500). animate ({top:' + = 270px '}, 500, function (){
$ ('. Three'). delay (500). animate ({top: '+ = 270px'}, 500, function (){
$ ('. Four'). delay (500). animate ({top: '+ = 270px'}, 500, function (){
$ ('. Five'). delay (500). animate ({top:' + = 270px '}, 500, function (){
$ ('. Six'). delay (500). animate ({top:' + = 270px '}, 500, function (){
$ ('. Seven'). animate ({top:' + = 270px '}, 500, function (){
Alert ('end in descending order! Yeah! ')
});
});
});
});
});
});
});

Well, that's right. The results are perfectly presented, but can you bear this dizzy code? Even if you can tolerate it, what if you want to change the execution order, for example, if you want to drop 5 and then drop 3, or add 8 to 15 squares? Rewrite? Are you sure you want to change it? Obviously, we need another simple and convenient method to achieve this effect, that is, the jQuery queue control method. See the following code:Copy codeThe Code is as follows: var _ slideFun = [
Function () {$ ('. one'). delay (500). animate ({top:' + = 270px '}, 500, _ takeOne );},
Function () {$ ('. two'). delay (300). animate ({top: '+ = 270px'}, 500, _ takeOne );},
Function () {$ ('. three'). delay (300). animate ({top: '+ = 270px'}, 500, _ takeOne );},
Function () {$ ('. four'). delay (300). animate ({top: '+ = 270px'}, 500, _ takeOne );},
Function () {$ ('. five'). delay (300). animate ({top:' + = 270px '}, 500, _ takeOne );},
Function () {$ ('. six'). delay (300). animate ({top:' + = 270px '}, 500, _ takeOne );},
Function () {$ ('. seven'). delay (300). animate ({top: '+ = 270px'}, 500, function (){
Alert ('end in descending order! Yeah! ');
});}
];
$ ('# Demo'). queue ('slidelist', _ slideFun );
Var _ takeOne = function (){
$ ('# Demo'). dequeue ('slidelist ');
};
_ TakeOne ();

In this way, it seems more concise. How to implement it?
1. Create an array and place the animation functions in sequence (is it much more convenient to add new animations in this way ?);
2. Use queue to add the array of animation functions to the slideList queue;
3. Use dequeue to retrieve the first function in the slideList queue and execute it;
4. Initially execute the first function.
The DEMO also provides detailed notes. If you still cannot understand the above instructions, please refer to the source code.
As for the clearQueue () method, I will not mention it. In the demonstration, the stop button calls the clearQueue () method. Of course, you can also use queue () method: Replace the current function Queues with an [] empty array (for personal comparison, we recommend replacing an empty array ., more intuitive ).

Blog published in Mr. Think: http://mrthink.net/jqueryapi-queue-dequeue/