1 line
5.6 KiB
JSON
1 line
5.6 KiB
JSON
{"name":"queue","type":"method","title":".queue()","deprecated":null,"removed":null,"desc":"Show or manipulate the queue of functions to be executed on the matched elements.","categories":["effects/custom-effects","data","utilities","version/1.2"],"entries":[{"return":"Array","signatures":{"added":"1.2","argument":{"desc":"A string containing the name of the queue. Defaults to <code>fx</code>, the standard effects queue.","name":"queueName","optional":"true","type":"String"}},"examples":{"desc":"Show the length of the queue.","code":"\nvar div = $( \"div\" );\n\nfunction runIt() {\n div\n .show( \"slow\" )\n .animate({ left: \"+=200\" }, 2000 )\n .slideToggle( 1000 )\n .slideToggle( \"fast\" )\n .animate({ left: \"-=200\" }, 1500 )\n .hide( \"slow\" )\n .show( 1200 )\n .slideUp( \"normal\", runIt );\n}\n\nfunction showIt() {\n var n = div.queue( \"fx\" );\n $( \"span\" ).text( n.length );\n setTimeout( showIt, 100 );\n}\n\nrunIt();\nshowIt();\n","css":"\n div {\n margin: 3px;\n width: 40px;\n height: 40px;\n position: absolute;\n left: 0px;\n top: 60px;\n background: green;\n display: none;\n }\n div.newcolor {\n background: blue;\n }\n p {\n color: red;\n }\n","html":"\n<p>The queue length is: <span></span></p>\n<div></div>\n"},"desc":"Show the queue of functions to be executed on the matched elements.","longdesc":""},{"return":"jQuery","signatures":[{"added":"1.2","argument":[{"desc":"A string containing the name of the queue. Defaults to <code>fx</code>, the standard effects queue.","name":"queueName","optional":"true","type":"String"},{"desc":"An array of functions to replace the current queue contents.","name":"newQueue","type":"Array"}]},{"added":"1.2","argument":[{"desc":"A string containing the name of the queue. Defaults to <code>fx</code>, the standard effects queue.","name":"queueName","optional":"true","type":"String"},{"desc":"The new function to add to the queue, with a function to call that will dequeue the next item.","name":"callback( next )","type":"Function"}]}],"examples":[{"desc":"Queue a custom function.","code":"\n$( document.body ).click(function() {\n $( \"div\" )\n .show( \"slow\" )\n .animate({ left: \"+=200\" }, 2000 )\n .queue(function() {\n $( this ).addClass( \"newcolor\" ).dequeue();\n })\n .animate({ left: \"-=200\" }, 500 )\n .queue(function() {\n $( this ).removeClass( \"newcolor\" ).dequeue();\n })\n .slideUp();\n});\n","css":"\n div {\n margin: 3px;\n width: 40px;\n height: 40px;\n position: absolute;\n left: 0px;\n top: 30px;\n background: green;\n display: none;\n }\n div.newcolor {\n background: blue;\n }\n","html":"\nClick here...\n<div></div>\n"},{"desc":"Set a queue array to delete the queue.","code":"\n$( \"#start\" ).click(function() {\n $( \"div\" )\n .show( \"slow\" )\n .animate({ left: \"+=200\" }, 5000 )\n .queue(function() {\n $( this ).addClass( \"newcolor\" ).dequeue();\n })\n .animate({ left: '-=200' }, 1500 )\n .queue(function() {\n $( this ).removeClass( \"newcolor\" ).dequeue();\n })\n .slideUp();\n});\n$( \"#stop\" ).click(function() {\n $( \"div\" )\n .queue( \"fx\", [] )\n .stop();\n});\n","css":"\n div {\n margin: 3px;\n width: 40px;\n height: 40px;\n position: absolute;\n left: 0px;\n top: 30px;\n background: green;\n display: none;\n }\n div.newcolor {\n background: blue;\n }\n","html":"\n<button id=\"start\">Start</button>\n<button id=\"stop\">Stop</button>\n<div></div>\n"}],"desc":"Manipulate the queue of functions to be executed, once for each matched element.","longdesc":"\n <p>Every element can have one to many queues of functions attached to it by jQuery. In most applications, only one queue (called <code>fx</code>) is used. Queues allow a sequence of actions to be called on an element asynchronously, without halting program execution. The typical example of this is calling multiple animation methods on an element. For example:</p>\n <pre><code>\n$( \"#foo\" ).slideUp().fadeIn();\n </code></pre>\n <p>When this statement is executed, the element begins its sliding animation immediately, but the fading transition is placed on the <code>fx</code> queue to be called only once the sliding transition is complete.</p>\n <p>The <code>.queue()</code> method allows us to directly manipulate this queue of functions. Calling <code>.queue()</code> with a callback is particularly useful; it allows us to place a new function at the end of the queue. The callback function is executed once for each element in the jQuery set.</p>\n <p>This feature is similar to providing a callback function with an animation method, but does not require the callback to be given at the time the animation is performed.</p>\n <pre><code>\n$( \"#foo\" ).slideUp();\n$( \"#foo\" ).queue(function() {\n alert( \"Animation complete.\" );\n $( this ).dequeue();\n});\n </code></pre>\n <p>This is equivalent to:</p>\n <pre><code>\n$( \"#foo\" ).slideUp(function() {\n alert( \"Animation complete.\" );\n});\n </code></pre>\n <p>Note that when adding a function with <code>.queue()</code>, we should ensure that <code>.dequeue()</code> is eventually called so that the next function in line executes.</p>\n <p><strong>As of jQuery 1.4</strong>, the function that's called is passed another function as the first argument. When called, this automatically dequeues the next item and keeps the queue moving. We use it as follows:</p>\n <pre><code>\n$( \"#test\" ).queue(function( next ) {\n // Do some stuff...\n next();\n});\n </code></pre>\n "}]} |