jQuery clearQueue() Method
Last Updated : 11 Jul, 2025
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= "https://code.jquery.com/jquery-1.10.2.js"> </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= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </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:
