.clearQueue()
Remove from the queue all items that have not yet been run.
.clearQueue(queueName)🡢 jQuery
queueName
| String | A string containing the name of the queue. Defaults to fx, the standard effects queue. |
When the .clearQueue() method is called, all functions on the queue that have not been executed are removed from the queue. When used without an argument, .clearQueue() removes the remaining functions from fx, the standard effects queue. In this way it is similar to .stop(true). However, while the .stop() method is meant to be used only with animations, .clearQueue() can also be used to remove any function that has been added to a generic jQuery queue with the .queue() method.
Empty the queue.
JS
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
CSS
div {
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 30px;
background: green;
display: none;
}
div.newcolor {
background: blue;
}
HTML
$("#start").click(function () {
var myDiv = $("div");
myDiv.show("slow");
myDiv.animate(
{
left: "+=200",
},
5000
);
myDiv.queue(function () {
var that = $(this);
that.addClass("newcolor");
that.dequeue();
});
myDiv.animate(
{
left: "-=200",
},
1500
);
myDiv.queue(function () {
var that = $(this);
that.removeClass("newcolor");
that.dequeue();
});
myDiv.slideUp();
});
$("#stop").click(function () {
var myDiv = $("div");
myDiv.clearQueue();
myDiv.stop();
});
DEMO