Thursday, January 9, 2025
Google search engine
HomeLanguagesJavascriptjQuery clearQueue() Method

jQuery clearQueue() Method

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: 

 

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

Dominic Rubhabha-Wardslaus
Dominic Rubhabha-Wardslaushttp://wardslaus.com
infosec,malicious & dos attacks generator, boot rom exploit philanthropist , wild hacker , game developer,
RELATED ARTICLES

Most Popular

Recent Comments