JQuery queue operation method example _ jquery-js tutorial

This article mainly introduces the jQuery queue operation method example and summarizes a simple and elegant queue control method. If you need a queue control method, refer to the jQuery core, this set of methods is composed of three methods: queue (), dequeue (), and clearQueue (). It controls the functions that require continuous execution in order and is mainly used in animate () method, ajax, and other events to be executed in chronological order.

First, explain the meanings of these methods.

Queue (name, [callback]): when only one parameter is input, 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, and 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 ). probably, this is a bit dizzy.

Dequeue (name): This is to remove a queue function from the frontend of the queue and execute it.

ClearQueue ([queueName]): This is the method added 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. view the DEMO
I will not post the css and html parts, but there are some in the DEMO. If you follow the common practice, you may need to use the following jQ code for implementation:

The 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:

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

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