jQuery .delay() Pause Between Queued Effects

What Is .delay()?

.delay() (since jQuery 1.4) sets a timer that pauses subsequent items on a queue (default "fx"). It does not animate by itself — it waits, then the next queued step runs. Returns the jQuery object for chaining.

$("#foo").slideUp(300).delay(800).fadeIn(400);
$el.delay("slow");                 // 600 ms
$el.delay(500, "tasks");           // named queue

// Only queued steps wait · not instant show/hide/css

How to Use .delay()

Chain .delay() between two queued effects so the second waits after the first finishes.

1. Select the element ($("#foo")).
2. Start a queued effect (.slideUp(300)).
3. Call .delay(800) (or "fast" / "slow").
4. Chain the next queued effect (.fadeIn(400)).
5. To cancel before it fires, call .clearQueue() (and .stop() if needed).

Pseudocode

call $(elements).delay(duration, queueName?)

name = queueName or "fx"
ms = resolve duration ("fast"→200, "slow"→600, or number)

for each matched element:
    enqueue a timer step on queue "name"
    when prior queued work is done:
        wait ms milliseconds
        then run the next queued function

return the jQuery set for chaining

Cheat Sheet

Keep these facts handy while timing effect chains.

Live Preview

Run a slideUp → delay → fadeIn chain. Pick the pause length, then reset.

Ready — click Run to delay between effects.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

$("button").on("click", function () {
  $("div.first").slideUp(300).delay(800).fadeIn(400);
  $("div.second").slideUp(300).fadeIn(400);
});

Both boxes slide up (300 ms)
Green waits 800 ms, then fades in
Blue fades in right after slideUp

$("#run").on("click", function () {
  $("#foo").show().slideUp(300).delay(800).fadeIn(400);
});

slideUp 300 ms → pause 800 ms → fadeIn 400 ms
Total ≈ 1500 ms of timed steps

$("#run").on("click", function () {
  $(".box").hide();
  $(".box").each(function (i) {
    $(this).delay(i * 400).fadeIn(500);
  });
});

Box 1 → delay 0 → fadeIn
Box 2 → delay 400 → fadeIn
Box 3 → delay 800 → fadeIn

$("#run").on("click", function () {
  var $el = $("#worker");
  $el.clearQueue("tasks");
  $("#log").text("");

  $el.queue("tasks", function (next) {
    $("#log").append("Step A\n");
    next();
  });
  $el.delay(500, "tasks");
  $el.queue("tasks", function (next) {
    $("#log").append("Step B (after 500ms delay)\n");
    next();
  });
  $el.dequeue("tasks");
});

Step A
Step B (after 500ms delay)

$("#start").on("click", function () {
  $("#box").stop(true, true).show()
    .slideUp(300)
    .delay(2000)
    .fadeIn(400);
});

$("#stop").on("click", function () {
  $("#box").clearQueue().stop();
});

Start → slideUp, then 2s delay queued
Stop mid-delay → pending delay + fadeIn removed
fadeIn never runs

Edge Cases & Pitfalls

Performance Notes

A single delay is inexpensive. Cost comes from stacking long chains on rapid clicks — clear pending work before restarting, and keep pauses short for better UX.

Key Takeaways