jquery Queue Control method detailed queue ()/dequeue ()/clearqueue () _jquery

Let's explain the meaning of this set of 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 an array of functions and the queue name defaults to FX); When two arguments are passed in, the first argument is the queue name for FX, and the second argument is in two cases, and when the second argument is a function, it adds a function at the end of the matching element's queue. When the second argument is an array of functions, it replaces the queue of matching elements with a new queue (an array of functions). Maybe, this is a bit dizzy to understand, and later, there will be a bit of this view demo.

dequeue (name): The good understanding is to remove a queue function from the front end of the queue and execute it.
Clearqueue ([QueueName]): This is the 1.4 new method. Empties all queues on the object that have not yet been executed. parameter is optional, and the default is FX. But personally feel that this method is not much use, the queue () method passed two parameters of the second parameter can be implemented Clearqueue method.
Now, we want to achieve such an effect, there are labeled 1 to 7 of the number of squares, asking these seven squares from left to right in descending order. Click here to view demo

CSS and HTML Part I don't post it, demo demo has. As a general practice, you might need to implement the following JQ code:

$ ('. One '). Delay. Animate ({top: ' +=270px '},500,function () {
		$ ('. two '). Delay. Animate ({top: ' +=270px '}, 500,function () {
			$ ('. three '). Delay. Animate ({top: ' +=270px '},500,function () {
				$ ('. Four '). Delay (500). Animate ({top: ' +=270px '},500,function () {
					$ ('. Five '). Delay. Animate ({top: ' +=270px '},500,function () {
						$ ('. Six '). Delay. Animate ({top: ' +=270px '},500,function () {
							$ ('. Seven '). Animate ({top: ' +=270px '},500, function () {
								alert (' The end of the sequence falling motion! yeah! ')
							});});
					}
	(});});

Well, yes, the effect is perfectly presented, but this dizzy code, can you stand it? Even if you can endure, if at this time, you want to change a certain order of execution, for example, you want to let 5 fall after falling 3, or new add 8 to 158 square, how to do? Rewrite it? Are you careful to change it in there? Obviously, we need another simple and convenient way to achieve this, and that is the jquery queue control method. See the following code:

 var _slidefun=[function () {$ ('. One '). Delay. Animate ({top: ' +=270px '},500,_takeone (), function () {$ ('. two '). Delay. Animate ({top: ' +=270px '},500,_takeone);}, function () {$ ('. three '). Delay (300). Animate ({top: ' +=270px '},500,_takeone);}, function () {$ ('. Four '). Delay (%). Animate ({top: ' +=270px '},500,_takeone) ;}, function () {$ ('. Five '). Delay. Animate ({top: ' +=270px '},500,_takeone);}, function () {$ ('. Six '). Delay (300). Animate ({top: ' +=270px '},500,_takeone);}, function () {$ ('. Seven '). Delay (%) animate ({top: ' +=270px '},500,function () {alert (' The end of the sequence falling motion!
	Yeah! ');
});}
];
$ (' #demo '). Queue (' Slidelist ', _slidefun);
var _takeone=function () {$ (' #demo '). Dequeue (' slidelist ');
_takeone (); 

This way, it doesn't look much simpler. How to achieve it?
1. Create a new array, put the animation function in sequence (this change in order, the new animation is more convenient?);
2. Add the array of animated functions to the Slidelist queue using queue;
3. Remove the first function in the slidelist queue with dequeue and execute it;
4. Initial execution of the first function.
Demo Demo also has detailed comments, if the above explanation is still not clear, please see the source code.
As far as the Clearqueue () method is concerned, the Stop button in the demo is called the Clearqueue () method, but you can also use the queue () method to replace the current function queue directly with an empty array implementation (personal comparisons recommend null array substitution., more intuitive).