2010-09-16 17:13:38 +00:00
<!DOCTYPE html>
2010-11-02 01:46:29 +00:00
< html lang = 'en' > < head >
< meta charset = "utf-8" / > < meta http-equiv = 'content-type' content = 'text/html; charset=UTF-8' / > < / head > < body >
2010-09-18 16:20:35 +00:00
< div data-role = "page" >
2010-09-21 14:58:54 +00:00
< div data-role = "header" >
2010-09-16 17:13:38 +00:00
< h1 > jQuery.queue()< / h1 >
< / div >
2010-09-16 18:27:10 +00:00
2010-10-12 19:50:28 +00:00
< div data-role = "content" data-theme = "c" id = "jQuery.queue1" >
2010-09-16 17:13:38 +00:00
< h2 class = "jq-clearfix roundTop section-title" >
< span class = "name" > jQuery.queue( element, [ queueName ] )< / span > < span class = "returns" > Returns: < a class = "return" href = "http://docs.jquery.com/Types#Array" > Array< / a > < / span >
< / h2 >
< div class = " entry-details" >
< p class = "desc" > < strong > Description: < / strong > Show the queue of functions to be executed on the matched element.< / p >
< ul class = "signatures" > < li class = "signature" id = "jQuery.queue-element-queueName" >
< h4 class = "name" >
< span class = "versionAdded" > version added: < a href = "/category/version/1.3/" > 1.3< / a > < / span > jQuery.queue( element, [ queueName ] )< / h4 >
< p class = "arguement" > < strong > element< / strong > A DOM element to inspect for an attached queue.< / p >
< p class = "arguement" > < strong > queueName< / strong > A string containing the name of the queue. Defaults to < code > fx< / code > , the standard effects queue.< / p >
< / li > < / ul >
< div class = "longdesc" > < p > < strong > Note:< / strong > This is a low-level method, you should probably use < code > < a href = "/queue" > .queue()< / a > < / code > instead.< / p > < / div >
< h3 > Example:< / h3 >
< div id = "entry-examples" class = "entry-examples" > < div id = "example-0" >
< h4 > < span class = "desc" > Show the length of the queue.< / span > < / h4 >
< pre > < code class = "example demo-code" > < !DOCTYPE html>
< html>
< head>
< 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="http://code.jquery.com/jquery-latest.js"> < /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");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
}
runIt();< /script>
< /body>
< /html> < / code > < / pre >
< h4 > Demo:< / h4 >
< div class = "demo code-demo" > < / div >
< / div > < / div >
< / div >
< / div >
2010-10-12 19:50:28 +00:00
< div data-role = "content" data-theme = "c" id = "jQuery.queue2" >
2010-09-16 17:13:38 +00:00
< h2 class = "jq-clearfix roundTop section-title" >
< span class = "name" > jQuery.queue( element, queueName, newQueue )< / span > < span class = "returns" > Returns: < a class = "return" href = "http://docs.jquery.com/Types#jQuery" > jQuery< / a > < / span >
< / h2 >
< div class = " entry-details" >
< p class = "desc" > < strong > Description: < / strong > Manipulate the queue of functions to be executed on the matched element.< / p >
< ul class = "signatures" >
< li class = "signature" id = "jQuery.queue-element-queueName-newQueue" >
< h4 class = "name" >
< span class = "versionAdded" > version added: < a href = "/category/version/1.3/" > 1.3< / a > < / span > jQuery.queue( element, queueName, newQueue )< / h4 >
< p class = "arguement" > < strong > element< / strong > A DOM element where the array of queued functions is attached.< / p >
< p class = "arguement" > < strong > queueName< / strong > A string containing the name of the queue. Defaults to < code > fx< / code > , the standard effects queue.< / p >
< p class = "arguement" > < strong > newQueue< / strong > An array of functions to replace the current queue contents.< / p >
< / li >
< li class = "signature" id = "jQuery.queue-element-queueName-callback" >
< h4 class = "name" >
< span class = "versionAdded" > version added: < a href = "/category/version/1.3/" > 1.3< / a > < / span > jQuery.queue( element, queueName, callback() )< / h4 >
< p class = "arguement" > < strong > element< / strong > A DOM element on which to add a queued function.< / p >
< p class = "arguement" > < strong > queueName< / strong > A string containing the name of the queue. Defaults to < code > fx< / code > , the standard effects queue.< / p >
< p class = "arguement" > < strong > callback()< / strong > The new function to add to the queue.< / p >
< / li >
< / ul >
< div class = "longdesc" >
< p > < strong > Note:< / strong > This is a low-level method, you should probably use < code > < a href = "/queue" > .queue()< / a > < / code > instead.< / p >
< p > Every element can have one or more 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.< / p >
< p > The < code > jQuery.queue()< / code > method allows us to directly manipulate this queue of functions. Calling < code > jQuery.queue()< / code > with a callback is particularly useful; it allows us to place a new function at the end of the queue.< / p >
< p > Note that when adding a function with < code > jQuery.queue()< / code > , we should ensure that < code > jQuery.dequeue()< / code > is eventually called so that the next function in line executes.< / p >
< / div >
< h3 > Examples:< / h3 >
< div id = "entry-examples" class = "entry-examples" >
< div id = "example-0" >
< h4 > Example: < span class = "desc" > Queue a custom function.< / span >
< / h4 >
< pre > < code class = "example demo-code" > < !DOCTYPE html>
< html>
< head>
< 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="http://code.jquery.com/jquery-latest.js"> < /script>
< /head>
< body>
Click here...
< div> < /div>
< script>
$(document.body).click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
jQuery.queue( $("div")[0], "fx", function () {
$(this).addClass("newcolor");
jQuery.dequeue( this );
});
$("div").animate({left:'-=200'},500);
jQuery.queue( $("div")[0], "fx", function () {
$(this).removeClass("newcolor");
jQuery.dequeue( this );
});
$("div").slideUp();
});< /script>
< /body>
< /html> < / code > < / pre >
< h4 > Demo:< / h4 >
< div class = "demo code-demo" > < / div >
< / div >
< div id = "example-1" >
< h4 > Example: < span class = "desc" > Set a queue array to delete the queue.< / span >
< / h4 >
< pre > < code class = "example demo-code" > < !DOCTYPE html>
< html>
< head>
< 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="http://code.jquery.com/jquery-latest.js"> < /script>
< /head>
< body>
< button id="start"> Start< /button>
< button id="stop"> Stop< /button>
< div> < /div>
< script>
$("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
jQuery.queue( $("div")[0], "fx", function () {
$(this).addClass("newcolor");
jQuery.dequeue( this );
});
$("div").animate({left:'-=200'},1500);
jQuery.queue( $("div")[0], "fx", function () {
$(this).removeClass("newcolor");
jQuery.dequeue( this );
});
$("div").slideUp();
});
$("#stop").click(function () {
jQuery.queue( $("div")[0], "fx", [] );
$("div").stop();
});
< /script>
< /body>
< /html> < / code > < / pre >
< h4 > Demo:< / h4 >
< div class = "demo code-demo" > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / body > < / html >
