Example tutorial of queue() function in jQuery_jquery

If the current jQuery object matches multiple elements: when getting the queue, only get the queue on the first matching element; when setting the queue (replacement queue, append function), set it separately for each matching element.
This function belongs to a jQuery object (instance). If you need 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.

Grammar
This function is new in jQuery 1.2. The queue() function has the following two uses:

Usage 1:

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

If no parameters are specified or only the queueName parameter is specified, it means to obtain the function queue with the specified name. If the newQueue parameter is specified, it means using the new queue newQueue to set (replace) all contents in the current queue.

Usage 2:

jQueryObject.queue( [ queueName ,] callback )

Adds the specified function to the specified queue (end).
Note: All setting operations of the queue() function are for each element matched by the current jQuery object; all reading operations are only for the first matching element.

Parameters
Please find the corresponding parameters based on the parameter names defined in the previous syntax section.
queueName: optional/Queue name specified by String type, defaults to "fx" (representing the standard animation effect queue in jQuery).
newQueue: Optional/Array type A new queue used to replace the contents of the current queue.
callback: The function specified by Function type will be appended to the queue. This function has a function parameter that is called to remove and execute the first function in the queue.

Return value
The return value of the queue() function is of Array/jQuery type. The type of the return value depends on whether the current queue() function performs a get operation or a set operation.
If the queue() function performs a setting operation (replacing the queue, appending a function), it returns the current jQuery object itself; if it is a retrieval operation, it returns the obtained function queue (array).
If the current jQuery object matches multiple elements, when reading data, the queue() function only uses the first matching element.

Example:
1. jQuery provides us with the queue() function to insert some of the 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 this is just this code. When you actually add it to the web page and try to run it, you will find that it is not "what you see is what you get" and it will have no effect at all.

After modification:

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

The general definition of dequeue() is to "delete the top function in the queue and execute it". I don't agree with the word "delete", but prefer "remove". In fact, the function of this function is like a pointer to the queue in a data structure. After the previous function in the queue is executed, the last function of the queue is removed. function at the top.

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 that controls the height is executed, and then in the next 1000 milliseconds, the "fader" queue that controls the opacity and the "fx" that controls the height are executed in parallel. The parallelism here is queue:false

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

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

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

Obviously, 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 of the matching element that has not yet been run. When the animation is finished running, the queue length will automatically be reduced to 0

5. Replacement queue

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

Two queues are defined here, one is the slow queue, which is the default 'fx', and the other is the fast queue 'fx2'

When a button is clicked:

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