jQuery Effects - Dequeue

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

jQuery dequeue() 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).

Now, when we use the queue() method and queue all the animations accordingly, then the jQuery effect functions declared after the queue() method doesn't get implemented. Hence, to overcome this factor, we need to break the queue. This is done by using the dequeue() method. This helps to break through the queue created and implement the other functions present.

dequeue() Method Syntax

$(selector).dequeue(queue_name);

This method accepts only one optional parameter which is the name of the queue.

The following example shows the implementation of the dequeue() 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. Then to implement the animate() method declared after the queue, we need to implement dequeue() to break out through that queue.

jQuery dequeue() 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 - Dequeue</h2>
    <p>Click the button to implement the Dequeue 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() {
                    $(this).css("border", '5px solid #000')
                        .dequeue();
                })
                .animate({
                    height: 150,
                    width: 200
                }, 4000)
        });
    });
  </script>
</html>

Output:

jQuery - Effects: Queue

jQuery - Effects: Clear Queue

Comments and Discussions!

Load comments ↻