jQuery clearQueue() method
The clearQueue() method in jQuery is used to remove all items from the animation queue of elements selected by the jQuery object. The animation queue is a series of animations that are waiting to be executed on the selected elements.
Here’s the basic syntax of the clearQueue() method:
$(selector).clearQueue([queueName])Parameters:
selector: The selector for the elements to clear the animation queue.queueName(optional): A string representing the name of the queue to be cleared. If not specified, the method clears the default “fx” queue, which is the standard animation queue.
Return Value:
The clearQueue() method returns the same jQuery object to support method chaining.
Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery clearQueue() Method Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
<button id="startAnimation">Start Animation</button>
<button id="stopAnimation">Stop Animation</button>
<script>
$(document).ready(function() {
var $box = $("div");
function startAnimation() {
$box.animate({ marginLeft: "200px" }, 2000);
$box.animate({ marginLeft: "0px" }, 2000);
}
function stopAnimation() {
// Clear the animation queue when the "Stop Animation" button is clicked
$box.clearQueue();
}
$("#startAnimation").click(function() {
startAnimation();
});
$("#stopAnimation").click(function() {
stopAnimation();
});
});
</script>
</body>
</html>In this example, we have a red square (a div element) and two buttons: “Start Animation” and “Stop Animation.” When the “Start Animation” button is clicked, the startAnimation() function is called, which animates the square to move right and then back to its original position. When the “Stop Animation” button is clicked, the stopAnimation() function is called, which uses the clearQueue() method to remove all animations from the animation queue, effectively stopping any ongoing animations.
Please note that the clearQueue() method is useful when you want to control the execution of animations and prevent queued animations from running. It allows you to remove animations from the queue so that only the currently running animation is executed.
If you want to stop only the currently running animation without clearing the entire queue, you can use the stop() method without any arguments:
$(selector).stop();This will stop the currently running animation and leave the rest of the animations in the queue intact.