jQuery Effects - Queue

jQuery Effects - Queue: Learn about the jQuery queue() method, how it works, and its example.
Submitted by Pratishtha Saxena, on September 25, 2022

jQuery queue() Method

By the term 'Queue', we mean a waiting line or list on which the events and processes are waiting for their turn. Therefore, in jQuery effects, when a lot of animations a lined together, the succeeding function has to wait for its preceding to get executed. This can be termed a queue. When the first animation is taking place, then all the animation functions after it are waiting in a default queue in jQuery named – fx (default queue name).

The queue() method in jQuery helps to queue all the other animation functions in a proper list according to the need. This will make sure which function has to be implemented after what.
This method accepts only one optional parameter which is the name of the queue.

queue() Method Syntax

$(selector).queue(queue_name);

There are many situations when different effects are declared for an element, but when it runs, they all get fired at different times which is not what we need. We need to queue them in proper order which gets executed one after the other only.

The following example shows the implementation of the queue() method, where when the button provided is clicked, it first reduces the image size in 4 seconds, makes it less opaque and after that using queue() method the CSS property is scheduled which gets executed only after the above function are fired. This CSS property creates a border around the image.

Also, by using the queue().length property of jQuery, we can get the number of functions that are queued.

jQuery queue() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Effects - Queue</h2>
    <p>Click the button to implement the Queue method on the image.</p>
    <button>Click Here</button>
    <hr>
    <img id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function() {
        $('button').click(function() {
            $('img').animate({
                    height: 200,
                    width: 300
                }, 4000)
                .animate({
                    opacity: 0.5
                }, 4000)
                .queue(function() {
                    $('h3').text("Queue Length: " + $('img').queue().length);
                    $(this).css("border", '5px solid #000');
                });
        });
    });
  </script>
</html>

Output:

jQuery - Effects: Delay

jQuery - Effects: Dequeue

Comments and Discussions!

Load comments ↻