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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!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.