Example of the queue () function in jQuery, jqueryqueue

Example of the queue () function in jQuery, jqueryqueue

If the current jQuery object matches multiple elements: when obtaining the queue, only the queue on the First Matching Element is obtained; when setting the queue (replacing the queue and append function, each matching element is set separately.
This function is a jQuery object (instance ). To remove and execute the first function in the queue, use the dequeue () function. You can also use the clearQueue () function to clear the specified queue.

Syntax
This function is added to jQuery 1.2. The queue () function has the following usage:

Usage 1:

jQueryObject.queue( [ queueName ] [, newQueue ] )

If no parameter is specified or only the queueName parameter is specified, the function queue with the specified name is obtained. If the newQueue parameter is specified, all content in the current queue is set (replaced) with the newQueue of the new queue.

Usage 2:

jQueryObject.queue( [ queueName ,] callback )

Add the specified function to the specified Queue (end ).
Note: All the setting operations of the queue () function are for each element that the current jQuery object matches. All read operations are only for the First Matching Element.

Parameters
Find the corresponding parameter based on the parameter name defined in the preceding syntax.
QueueName: the queue name specified by the optional/String type. The default value is "fx" (indicating the standard animation effect queue in jQuery ).
NewQueue: Optional/Array type is used to replace the New queue of the current queue content.
Callback: The Function specified by the Function type will be appended to the queue. This function has a function parameter that can be called to remove and execute the first function in the queue.

Return Value
The Return Value of the queue () function is of the Array/jQuery type. The type of the return value depends on whether the current queue () function performs the get operation or set operation.
If the queue () function performs a set operation (replacing the queue and append the function), the current jQuery object itself is returned, returns the obtained function Queue (array ).
If the current jQuery object matches multiple elements, when reading data, the queue () function only takes the first matching element as the standard.

Instance:
1. jQuery provides the queue () function for us to insert some code you need into a queue.

$('#test-change1').toggle(function(){  $('#test-object1').hide('slow').queue(function(next){    $('#test-object1').appendTo($('#test-goal1'));    next();  }).show('slow');},function(){  $('#test-object1').hide('slow').queue(function(next){    $('#test-object1').appendTo($('#test-origin1'));    next();        }).show('slow');});

2. Custom queue

$("div").queue("custom", function(next) {  $('div').css({'background':'red'});  next();});

But it's just this code. When you really add it to the webpage and try to run it, you will find that it is not "What you see is what you get", and it will not have any effect at all.

After modification:

$("div").queue("custom", function(next) {  $('div').css({'background':'red'});  next();}).dequeue("custom"); //this is the key

Generally, dequeue () is defined as "deleting the top function in the queue and executing it ". I don't agree with the word "delete", but tend to "retrieve". In fact, this function is like a pointer to a queue in a data structure. After the previous function in the queue is executed, take the function at the top of the next queue.

3. queue: false

$("#object").delay(1000, "fader").queue("fader", function(next) {  $(this).animate({opacity: 0},    {duration: 1000, queue: false});  next();}).dequeue("fader").animate({top: "-=40"}, {duration: 2000})

In the first 1000 milliseconds, only the "fx" queue with control height is executed, and then 1000 milliseconds, the "fader" queue with control Opacity is in parallel with the "fx" with control height. The parallel operation here is queue: false.

$('#section3a').slideUp(1000)      .slideDown(1000)      .animate({width: '50px'}, {duration: 1000, queue: false});

4. Get Queue Length
For example, use the queue name to get the length of the matching element:

var $queue=$("div").queue('fx');

Obviously, it is to get the queue named 'fx '. If you want to get the length:

var $length=$('div').queue('fx').length;

Note that the queue length here is only the queue length that matches the element that has not been run. After the animation is run, the queue length is automatically classified as 0.

5. Replace the queue

$ ('Div '). queue ('fx ', function () {$ ('div '). slideDown ('low '). slideUp ('low '). animate ({left: '+ = 100'}, 4000) ;}); // define fx $ ('div '). queue ('fx2 ', function () {$ ('div '). slideDown ('fast '). slideUp ('fast '). animate ({left: '+ = 100'}, 1000) ;}); // define fx2

Two queues are defined here. One is the slow queue, that is, the default 'fx ', and the other is the fast queue 'fx2'

When you click a button:

$('input').click(function(){  $('div').queue('fx',fx2);});