Open In App

jQuery clearQueue() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The jQuery clearQueue() method removes all items from the queue that have not yet been run. Note that when a function has started to run, it runs until it is completed. 

Syntax:

$(selector).clearQueue(name);

Here “selector” is the selected element. 

Parameter: It accepts a parameter “name” which is the name of the function. 

jQuery examples to show the working of clearQueue() method:
Example 1: In the below code, animation method is cleared. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
    <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>
  
</html>


Output: 

 

Example 2: In this example, the border will expand

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
    <script>
        < !--jQuery code to demonstrate clearQueue method-- >
            $(document).ready(function () {
                $(".b1").click(function () {
                    $("p").animate({
                        borderRightWidth: "5px"
                    });
                    $("p").animate({
                        borderTopWidth: "5px"
                    });
                    $("p").animate({
                        borderLeftWidth: "5px"
                    });
                    $("p").animate({
                        borderBottomWidth: "5px"
                    });
                });
                $(".b2").click(function () {
                    $("p").clearQueue();
                });
            });
    </script>
    <style>
        p {
            display: block;
            width: 150px;
            border: 1px solid green;
            padding: 10px;
        }
    </style>
</head>
  
<body>
    <p>This is a paragraph.</p>
    <!-- click on this button to start the animation -->
    <button class="b1">Start</button>
    <!-- click on this button to stop the animation
            at given situation -->
    <button class="b2">Stop</button>
</body>
  
</html>


Output: 

 



Last Updated : 18 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads