Usage examples of queue() method in jQuery_jquery

The example in this article describes the usage of queue() method in jQuery. Share it with everyone for your reference. The specific analysis is as follows:

This method can display or operate the function queue executed on the matching element.

This method may not be used too frequently, but it is very important. The following is an example of how to use this method.
The effects vary depending on the method parameters.
Note: It is recommended to study together with the dequeue() function.
Grammar structure 1:

Copy code The code is as follows:

$("selector").queue(queueName)

Parameter list:

参数	描述
queueName	可选。 第一个匹配元素上动画队列的名称，默认值是“fx”。

When there are no parameters, it can return the animation queue on the first matching element.

Example code:

Copy code The code is as follows:

Click to start animation
Count the number of functions in the queue

Since the queue() function has no parameters, the return value is the animation queue on the first matching element, which is the animation queue of the div element. When the second button is clicked, the number in the current queue can be calculated in real time. Number of animations.
Grammar 2:

Copy code The code is as follows:

$("selector").queue(callback())

You can add a function to the end of the function queue of matching elements.

Parameter list:

参数	描述
callback()	匹配元素上的函数队列最后面要添加的函数。

In the example of Grammar 1, you may notice a problem, that is, we hope to add the words "animation completed" to the div after all animations are completed, but judging from the actual performance of the operation , not so. The main reason is that the show() and animate() animation functions will be added to the fx animation queue by default, and the text() method is not an animation function, so it will not be added to the fx queue and will be executed first. . Then you can enqueue the text() method by using this function.

Example code:

Example 1:

Copy code The code is as follows:

Click to start animation
Count the number of functions in the queue

The above code achieves the final effect we need.

Example 2:

Copy code The code is as follows:

Click to start animation
Count the number of functions in the queue

In the above code, we want to execute a custom animation after executing the text() method, but the performance is not like this, and the last custom animation is not executed.
The code is modified as follows:

Copy code The code is as follows:

Click to start animation
Count the number of functions in the queue

The above code implements our requirements, add:
to the code

Copy code The code is as follows:

$(this).dequeue();

That is to say, when adding a function through queue(), we should ensure that .dequeue() is finally called so that the next queued function can be executed.

I hope this article will be helpful to everyone’s jQuery programming.