jQueue dequeue()

Filed Under: jQuery

jQuery deQueue() function removes the next function waiting to execute in the queue of the selected elements. To ensure that process is running, you must make sure that this method should be called only after the addition of a function with queue() method.

jQuery deQueue()

Here is the general syntax to use jQuery deQueue() method.

selector.deQueue(QueueName);

QueueName is an optional argument which is a string with the name of the queue. Default value is fx, which is the standard effects queue.

jQuery dequeue() example

Following example demonstrates the use of deQueue method. A queue of functions gets executed by clicking the start Animation button.


<!doctype html>
<html>
<head>
<title>jQuery Dequeue Method</title>
<style>
div {
height: 60px;
margin: 5px;
width: 60px;
position: absolute;
left: 10px;
top: 50px;
background-color: red;
}
div.green{
background-color: green;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<button>Start Animation</button>
<div></div>
<script>
$( "button" ).click(function() {
$( "div" )
.animate({ left:"200px" }, 1500 )
.animate({ top:"0px" }, 700 )
.queue(function() {
$( this ).toggleClass( "green" ).dequeue();
})
.animate({ left:"100px", top:"30px" }, 800 );
});
</script>
</body>
</html>

jQuery deQueue() method removes the next non-executed functions from the queue. If nothing is passed as an argument, then the deQueue method will remove the functions from the standard effects queue.

jQuery dequeue demo

jQuery deQueue() method is always used with queue() method and if not used, the queue will not be closed and you will get undesired result.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages