jQuery clearQueue() Method

Quiz

The jQuery clearQueue() method is used to remove all items from the queue that have not yet been run for the selected elements.

It is typically used to stop or clear animations or other queued functions that have not yet started. The default queue name is "fx", which is used by all jQuery animation methods.

Syntax

Following is the syntax of jQuery clearQueue() method −

$(selector).clearQueue(queueName)

Parameters

Here is the description of the above syntax −

queueName (optional): The name of the queue to clear. If omitted, the default "fx" queue is cleared.

Example

In the following example, we are using the jQuery clearQueue() method to stop the remaining functions in the queue −

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#start").click(function(){
    $("#box").animate({height: 300}, 1500)
             .animate({width: 300}, 1500)
             .animate({height: 100}, 1500)
             .animate({width: 100}, 1500);
  });
  
  $("#stop").click(function(){
    $("#box").clearQueue();
    alert("Animation queue cleared!");
  });
});
</script> 
</head>
<body>

<button id="start">Start Animation</button>
<button id="stop">Stop Animation</button>
<br><br>

<div id="box" style="background:lightgreen;height:100px;width:100px;"></div>
 
</body>
</html>

After executing, when you click the "Start Animation" button, the div with the id = "box" will go through a provided series of animations.

If you click the "Stop Animation" button at any point, the clearQueue() method will clear any remaining animations in the queue, and an alert box will display the message: "Animation queue cleared!"

jquery_ref_effects.htm

Print Page