jQuery.queue()?jQuery.queue(element, …) (alias $.queue) shows or changes the function queue on a DOM element (added in jQuery 1.3). Default queue name is "fx".
// 1) Read (returns Array)
$.queue(element [, queueName])
// 2) Append a function
$.queue(element, queueName, callback)
// 3) Replace the whole queue
$.queue(element, queueName, newQueueArray)
var n = $.queue($("#box")[0], "fx");
console.log(n.length); // pending steps
$.queue(el, "fx", function () {
$(this).text("mid");
$.dequeue(this); // continue!
});| Need | Use |
|---|---|
| Low-level inspect / add | $.queue(elem, …) |
| Everyday API | $(elem).queue() |
| Continue after a custom step | $.dequeue(elem) |
jQuery.queue()Inspect length, append a step, or replace the queue — always finish custom steps.
$el[0] or this in a callback).$.queue(el, "fx") and check .length.$.queue(el, "fx", fn) — end fn with $.dequeue(this).$.queue(el, "fx", []) (often plus .stop()).| Piece | Required? | Role |
|---|---|---|
element | Yes | Raw DOM element that owns the queue |
queueName | Usual | Defaults to "fx" when reading |
callback / newQueue | Optional | Append one function, or replace with an array |
function queue(element, name = "fx", third):
if third is missing:
return array of pending functions
if third is a function:
append third to element.queues[name]
return the queue array
if third is an array:
replace element.queues[name] with third
return the queue array
// After appending a custom step:
callback must eventually call dequeue(element, name)Keep these facts handy while working with jQuery queues.
| Topic | Detail |
|---|---|
| Syntax | jQuery.queue(element, …) / $.queue(…) |
| Since | jQuery 1.3 |
| Default queue | "fx" (effects) |
| Read | Returns Array — use .length |
| Append | $.queue(el, "fx", fn) then $.dequeue |
| Clear pending | $.queue(el, "fx", []) or .clearQueue() |
| Twin | .queue() |
Start a short fade chain, then inspect length, append a step, or clear with [].
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Read the fx queue array and print .length.
$("#box").fadeOut(800).fadeIn(800).fadeOut(800);
var n = jQuery.queue($("#box")[0], "fx");
console.log("Queue length is: " + n.length);fx queue.jQuery.queue(el, "fx") returns the pending array.n.length is how many steps are still waiting or in flight.Add a mid-step with $.queue, then continue with $.dequeue.
var el = $("#box")[0];
$("#box").fadeOut(400);
jQuery.queue(el, "fx", function () {
$(this).text("Mid step");
jQuery.dequeue(this);
});
$("#box").fadeIn(400);fadeOut pushes the first fx step.$.queue(el, "fx", fn) adds your custom work.fn, update the text (or class).$.dequeue(this) unlocks fadeIn.[]Drop pending steps by replacing the queue with an empty array.
var el = $("#box")[0];
$("#box").fadeOut(2000).fadeIn(2000).fadeOut(2000);
// Later — cancel waiting steps:
jQuery.queue(el, "fx", []);
$("#box").stop();fx queue.$.queue(el, "fx", []) empties pending functions..stop() ends the animation already running..clearQueue() when using the instance style.Use a named queue separate from "fx".
var el = document.getElementById("box");
$.queue(el, "tasks", function (next) {
$(el).text("Step 1");
setTimeout(next, 400);
});
$.queue(el, "tasks", function () {
$(el).text("Step 2");
$.dequeue(el, "tasks");
});
$.dequeue(el, "tasks"); // start"tasks" is independent of the effects queue.$.dequeue(el, "tasks") starts the pipeline.next or $.dequeue.$.queue vs .queue()Same mid-step job — static utility vs instance method.
// Static (DOM element first):
$.queue($("#a")[0], "fx", function () {
$(this).text("via $.queue");
$.dequeue(this);
});
// Instance (preferred day to day):
$("#b").queue(function (next) {
$(this).text("via .queue()");
next();
});$.queue(el, "fx", fn) needs a raw node and $.dequeue..queue(fn) runs on a collection; next() continues.fx pipeline under the hood..queue() for everyday UI code.Check these before manipulating queues by hand.
If you add a function with $.queue and never call $.dequeue / next, later steps freeze.
Use $el[0] or .get(0). The static API expects an element.
[] clears pending — not the current frameEmptying the queue drops waiting steps. Pair with .stop() to halt the animation already running.
Custom queues need the same string on queue and dequeue. Default "fx" is for effects.
jQuery.queue() is available since jQuery 1.3+ in all modern browsers with jQuery loaded. It is a jQuery utility (not a native browser API).
Works in Chrome, Firefox, Safari, and Edge whenever jQuery 1.3+ is loaded. Prefer $(el).queue() for everyday animation chains.
Bottom line: Use $.queue(el, …) when you hold a raw DOM node. For most UI code, call $(el).queue() and finish custom steps with dequeue / next.
| Approach | Cost | Best for |
|---|---|---|
$.queue(el) read | O(1) | Checking pending length |
| Append callback | O(1) | One custom mid-step |
| Very long fx stacks | UI-bound | Keep chains short; clear with [] / .stop() |
Queue bookkeeping is cheap. Cost comes from the animations and timers you schedule — keep queues short and always finish custom steps.
One line: $.queue reads or rewrites an element’s function list — append carefully, and always dequeue.
Learn how to run the next function on an element’s queue.
9 people found this page helpful