Basically, we all know that the jQuery will make the code simple and easy to do more. Likewise, if you are having an unexecuted or unused animated item in a queue and wish to clear it, then clearQueue() jQuery method will do it.

Here, in this section we will show you how to remove unexecuted animation from jQuery using the function clearQueue().

Using the clearQueue() method, you can remove all items from the queue that have not yet been run. Moreover, once a function has started to run, it runs until it is completed.

Syntax

$(selector).clearQueue(queueName)

The parameter queuname is optional that specifies the name of the function.

Example Code for clearQueue()

$(“button”).click(function(){

    $(“div”).clearQueue();

});

Simple Program

<head> 
    <script> 
        <!-- jQuery code to demonstrate clearQueue method -->
        $(document).ready(function() { 
            <!-- click button to start animation -->
            $("#b1").click(function() { 
                $("div").animate({height: 200}, 2000); 
                $("div").animate({width: 200}, 2000); 
                $("div").animate({height: 100}, 2000); 
                $("div").animate({width: 100}, 2000); 
                $("div").animate({height: 200}, 2000); 
                $("div").animate({width: 200}, 2000); 
                $("div").animate({height: 100}, 2000); 
                $("div").animate({width: 100}, 2000); 
            }); 
            <!-- button to stop animation -->
            $("#b2").click(function() { 
                $("div").clearQueue(); 
            }); 
        }); 
    </script> 
    <style> 
        div { 
            background: green; 
            height: 100px; 
            width: 100px; 
        }           
        button { 
            margin-top: 10px; 
        } 
    </style> 
</head> 
<body> 
    <div></div> 
    <!-- click on this button to start the animation -->
    <button id="b1">Start !</button> 
    <!-- click on this button to stop the animation at  
             given situation -->
    <button id="b2">Stop !</button> 
</body>

Leave a Reply

Your email address will not be published. Required fields are marked *