Contents:
jQuery.queue( element [, queueName ] )Returns: Array
Description: Show the queue of functions to be executed on the matched element.
-
version added: 1.3jQuery.queue( element [, queueName ] )
Note: This is a low-level method, you should probably use -queue()
instead-
Example:
Show the length of the queue.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery.queue demo</title> <style> div { margin: 3px; width: 40px; height: 40px; position: absolute; left: 0px; top: 30px; background: green; display: none; } div.newcolor { background: blue; } span { color: red; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> </head> <body> <button id="show">Show Length of Queue</button> <span></span> <div></div> <script> $( "#show" ).click(function() { var n = jQuery.queue( $( "div" )[ 0 ], "fx" ); $( "span" ).text( "Queue length is: " + n.length ); }); function runIt() { $( "div" ) .show( "slow" ) .animate({ left: "+=200" }, 2000 ) .slideToggle( 1000 ) .slideToggle( "fast" ) .animate({ left: "-=200" }, 1500 ) .hide( "slow" ) .show( 1200 ) .slideUp( "normal", runIt ); } runIt(); </script> </body> </html>
Demo:
jQuery.queue( element, queueName, newQueue )Returns: jQuery
Description: Manipulate the queue of functions to be executed on the matched element.
-
version added: 1.3jQuery.queue( element, queueName, newQueue )
-
version added: 1.3jQuery.queue( element, queueName, callback )
Note: This is a low-level method, you should probably use -queue()
instead-
Every element can have one or more queues of functions attached to it by jQuery- In most applications, only one queue (called fx
) is used- Queues allow a sequence of actions to be called on an element asynchronously, without halting program execution-
The jQuery-queue()
method allows us to directly manipulate this queue of functions- Calling jQuery-queue()
with a callback is particularly useful; it allows us to place a new function at the end of the queue-
Note that when adding a function with jQuery-queue()
, we should ensure that jQuery-dequeue()
is eventually called so that the next function in line executes-
Examples:
Queue a custom function.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery.queue demo</title> <style> div { margin: 3px; width: 40px; height: 40px; position: absolute; left: 0px; top: 30px; background: green; display: none; } div.newcolor { background: blue; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> </head> <body> Click here... <div></div> <script> $( document.body ).click(function() { var divs = $( "div" ) .show( "slow" ) .animate({ left: "+=200" }, 2000 ); jQuery.queue( divs[ 0 ], "fx", function() { $( this ).addClass( "newcolor" ); jQuery.dequeue( this ); }); divs.animate({ left: "-=200" }, 500 ); jQuery.queue( divs[ 0 ], "fx", function() { $( this ).removeClass( "newcolor" ); jQuery.dequeue( this ); }); divs.slideUp(); }); </script> </body> </html>
Demo:
Set a queue array to delete the queue.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery.queue demo</title> <style> div { margin: 3px; width: 40px; height: 40px; position: absolute; left: 0px; top: 30px; background: green; display: none; } div.newcolor { background: blue; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script> </head> <body> <button id="start">Start</button> <button id="stop">Stop</button> <div></div> <script> $( "#start" ).click(function() { var divs = $( "div" ) .show( "slow" ) .animate({ left: "+=200" }, 5000 ); jQuery.queue( divs[ 0 ], "fx", function() { $( this ).addClass( "newcolor" ); jQuery.dequeue( this ); }); divs.animate({ left: "-=200" }, 1500 ); jQuery.queue( divs[ 0 ], "fx", function() { $( this ).removeClass( "newcolor" ); jQuery.dequeue( this ); }); divs.slideUp(); }); $( "#stop" ).click(function() { jQuery.queue( $( "div" )[ 0 ], "fx", [] ); $( "div" ).stop(); }); </script> </body> </html>