jQuery Effects - Clear Queue

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

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

clearQueue() method is used to clear all the functions that have been provided in a queue for an element. The aim of this method is to remove all the other animation methods that are linked to that element except the one which is executing. Hence, this method lets the running function complete itself. But the functions after it are not executed since they all are removed.

clearQueue() Method Syntax

$(selector).clearQueue();

clearQueue() method does not accept any parameters.

The following example shows the implementation of the clearQueue() method, where when the start button is clicked, it executes all the animations until the stop button is clicked. When the stop button is clicked, it triggers the clearQueue() method and removes all other methods apart from the one which is running. Hence, it lets the running function finish.

jQuery clearQueue() 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 - ClearQueue</h2>
    <p>Click the button to implement the ClearQueue method on the image.</p>
    <button id="btn1">Start Animation</button>
    <button id="btn2">Stop Animation</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() {
        $('#btn1').click(function() {
            $('img').animate({
                    height: 200,
                    width: 300
                }, 4000)
                .animate({
                    opacity: 0.75
                }, 4000)
                .queue(function() {
                    $(this).css("border", '5px solid #000').dequeue();
                })
                .animate({
                    height: 150,
                    width: 200
                }, 4000)
        });
    
        $('#btn2').click(function() {
            $(alert('Queue Cleared !'));
            $('img').clearQueue();
        })
    });
  </script>
</html>

Output:

jQuery - Effects: Dequeue

jQuery - Effects: Finish

Comments and Discussions!

Load comments ↻