jQuery queue() Method

Quiz

The jQuery queue() method is used to display the queue of functions to be executed on selected elements.

A queue is one or more function(s) waiting to run.

Syntax

Following is the syntax of jQuery queue() method −

$(selector).queue(queueName)

Parameters

Here is the description of the above syntax −

queueName (optional): A string containing the name of the queue. If omitted, the default "fx" queue is used.

Example

In the following example, we are using the jQuery queue() method to retreive the length of the queue of functions to be executed on the div element with id = "box" −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#start").click(function(){
                var box = $("#box");
                box.animate({height: "200px"});
                box.animate({width: "200px"});
                box.animate({height: "50px"});
                box.animate({width: "50px"});

                $("#queueLength").text(box.queue().length);   
            });
        });
    </script>
    <style>
        #box {
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>
</head>
<body>

<div id="container">
    <button id="start">Trigger Animation</button>
    <p>Queue length: <span id="queueLength">0</span></p>
    <div id="box"></div>
</div>

</body>
</html>

After executing the above program, the click on the button ("Trigger Animation") to get the queue length.

jquery_ref_effects.htm

Print Page