The clearQueue method
The clearQueue method allows us to remove from the queue all functions that have not been run.
Syntax
This is how we can clear the function queue. You can optionally pass the queue name as a string (by default fx is the standard effects queue). If you don't pass any parameters, all remaining functions will be removed from the fx queue:
.clearQueue([queue name]);
This method is similar to the stop method. But if the latter can only work with animation, then clearQueue allows you to work with any jQuery queue that was added by the queue method.
Example
Let's start the animation when we click the #start button. When we click the #stop button, we will stop the animation and clear the queue using the clearQueue method. When we click #start again, the animation will start over:
<button id="start">start</button>
<button id="stop">stop</button>
<div></div>
div {
position: absolute;
margin: 3px;
width: 50px;
height: 50px;
left: 0px;
top: 30px;
background: red;
display: none;
}
div.newcolor {
background: green;
}
$('#start').click(function() {
let myDiv = $('div');
myDiv.show('slow');
myDiv.animate({
left: '+=200'
}, 5000);
myDiv.queue(function() {
let that = $(this);
that.addClass('newcolor');
that.dequeue();
});
myDiv.animate({
left: '-=200'
}, 1500);
myDiv.queue(function() {
let that = $(this);
that.removeClass('newcolor');
that.dequeue();
});
myDiv.slideUp();
});
$('#stop').click(function() {
let myDiv = $('div');
myDiv.clearQueue();
myDiv.stop();
});
