Detailed explanation of usage examples of queue() function queue in jQuery

This article mainly introduces the example tutorial of the queue() function in jQuery. The queue() function provides convenience for the execution sequence control operation of the JavaScript function. It is required Friends can refer to the following

If the current jQuery object matches multiple elements: when getting the queue, only the queue on the first matching element is obtained; when setting the queue (replacement queue, append function), each matching Elements are set individually.
This function belongs to the 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.

Syntax
This function was added in jQuery 1.2. The queue() function has the following two usages:

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 )

Add 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 read operations are only for the first matching element.

Parameters
Please find the corresponding parameters according to the parameter names defined in the previous syntax section.
queueName: Optional/StringType specified queue name, the default is "fx" (indicating the standard animation effect queue in jQuery).
newQueue: Optional/Array type is used to replace the new queue content of the current queue.
callback: The function specified by the Function type will be appended to the queue. This function has a function parameter, which can be called to remove and execute the first function in the queue.

Return value
queue()The return value of the function is an Array/jQuery type. The type of the return value depends on what the current queue() function is executing. Get operation or 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

$("p").queue("custom", function(next) {
  $('p').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 not work at all. have any effect.

After modification:

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

The general definition of dequeue() is "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 "fx" that controls the opacity fader" queue in parallel with "fx" which controls the height. The parallel 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=$("p").queue('fx');

Obviously, it is to get Queue with the queue name 'fx', if you want to get the length:

var $length=$('p').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

$('p').queue('fx',function(){
    $('p').slideDown('slow')
         .slideUp('slow')
         .animate({left:'+=100'},4000);
});//定义fx
$('p').queue('fx2',function(){
    $('p').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(){
  $('p').queue('fx',fx2);
});

The above is the detailed content of Detailed explanation of usage examples of queue() function queue in jQuery. For more information, please follow other related articles on the PHP Chinese website!