Example tutorials for queue queues () functions in jquery _jquery

If the current jquery object matches more than one element: When the queue is fetched, only the queues on the first matching element are fetched, and the queue (the replacement queue, the APPEND function) is set separately for each matching element.
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 empty the specified queue.

Grammar
JQuery 1.2 adds this function. The queue () function has the following two uses:

Usage One:

Jqueryobject.queue ([QueueName] [, Newqueue])

If no parameters are specified or only the QueueName parameter is specified, the function queue that gets the specified name is obtained. If the Newqueue parameter is specified, the new queue Newqueue is used to set (replace) all content in the current queue.

Usage Two:

Jqueryobject.queue ([QueueName,] callback)

Adds the specified function to the specified queue (the end).
Note: All settings for the queue () function match every element that matches the current jquery object; All read operations are for the first matching element only.

Parameters
find the corresponding argument based on the parameter name defined in the previous syntax section.
QueueName: Optional/string type Specifies the queue name, which defaults to "FX", which represents the standard animation effect queue in jquery.
Newqueue: The optional/array type is used to replace the new queue for the current queue content.
The function specified by the Callback:function type is appended to the queue. The function has a function argument that can be invoked to remove and execute the first function in the queue.

return value
The return value of the queue () function is the array/jquery type, and the type of the return value depends on whether the current queue () function performs a fetch operation or a set operation.
If the queue () function performs a set operation (a substitution queue, an append function), the current jquery object itself is returned, and the obtained function queue (array) is returned if it is a fetch operation.
If the current jquery object matches multiple elements, the queue () function takes only the first matching element when reading the data.

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 queues

$ ("div"). Queue ("Custom", function (next) {
  $ (' div '). css ({' Background ': ' Red '});
  Next ();
});

But for this code, when you actually add to the page and try to run it, you'll find that it's not "WYSIWYG," and there's no effect at all.

After modification:

$ ("div"). Queue ("Custom", function (next) {
  $ (' div '). css ({' Background ': ' Red '});
  Next ();
})
. Dequeue ("Custom"); This is the key

The general pair with dequeue () is defined as "delete the topmost function in the queue and execute it." I do not agree with the word "delete", but tend to "take out", in fact, this function is like a data structure in the queue pointer, to the queue after the previous function, after the end of a queue to remove the topmost function.

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

The first 1000 milliseconds, only control the height of the "FX" queue execution, and then 1000 milliseconds, control the opacity of the "fader" queue and control the height of the "FX" parallel. The parallelism 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, you 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 just the length of the queue where the element is not yet running, and when the animation is finished, the queue length is automatically 0

5. Replacement queue

$ (' div '). Queue (' FX ', function () {
    $ (' div '). Slidedown (' slow ').
         slideup (' slow ').
         Animate ({left: ' = (},4000);
}); /define FX
$ (' div '). Queue (' FX2 ', function () {
    $ (' div '). Slidedown (' fast ').
         slideup (' Fast
         '). Animate ({left: ' +=100 '},1000);
}); /Definition FX2

This defines two queues, one is a slow queue, the default is ' FX ', and the other is the fast queue ' FX2 '

When you click a button:

$ (' input '). Click (function () {
  $ (' div '). Queue (' FX ', FX2);
});