jQuery delay() and Queue

The delay() method pauses execution of queued animations before the next one starts. jQuery queues let you line up multiple animations so they run one after another. Understanding delay and queues helps you create smooth, timed animation sequences.

What is delay()?

The delay() method inserts a waiting period between two animations in a queue. It does not stop JavaScript — it only pauses the next animation in the effects queue.

Syntax

$(selector).delay(duration).nextEffect();
$(selector).delay(duration, queueName).nextEffect();

// duration in milliseconds or "slow" / "fast"

Basic Example

$(document).ready(function() {
    $("#box")
        .fadeIn(500)        // fade in over 0.5 seconds
        .delay(1000)        // wait 1 second
        .fadeOut(500);      // then fade out over 0.5 seconds
});

Diagram: delay() in a Chain

  Time 0ms    → fadeIn starts  (box appears slowly)
  Time 500ms  → fadeIn done    (box fully visible)
  Time 500ms  → delay(1000) starts (waiting...)
  Time 1500ms → delay done     (waiting period over)
  Time 1500ms → fadeOut starts (box disappears slowly)
  Time 2000ms → fadeOut done   (box gone)

delay() Without Animation — Does Not Work

An important point: delay() only works with jQuery's animation queue. It does not delay regular jQuery methods like .css(), .text(), or .addClass(). For those, use setTimeout().

// This does NOT work as expected:
$("#box").delay(1000).css("color", "red");

// Use setTimeout instead:
setTimeout(function() {
    $("#box").css("color", "red");
}, 1000);

What is a Queue?

jQuery uses an internal queue to manage animations. Think of a queue like a line at a coffee shop. Customers (animations) are served one at a time, in order. No one jumps the line.

Queue Diagram

  Animation Queue for #banner:

  Position 1: slideDown("slow")     ← runs now
  Position 2: delay(800)            ← runs after position 1
  Position 3: fadeOut(400)          ← runs after position 2
  Position 4: slideUp("fast")       ← runs after position 3

  Each animation waits for the previous one to finish.

Chaining Multiple Animations with delay()

$(document).ready(function() {
    $("#notification")
        .slideDown("fast")       // show the notification bar
        .delay(3000)             // keep it visible for 3 seconds
        .slideUp("slow");        // then hide it slowly
});

This pattern is perfect for toast notifications or auto-dismissing alerts.

queue() Method — View the Animation Queue

The queue() method returns the array of queued functions waiting to run on an element.

var q = $("#box").queue();
console.log("Queue length: " + q.length);

dequeue() Method — Manually Trigger Next Animation

The dequeue() method removes the first function from the queue and runs the next one. You use it when you manually add functions to the queue with queue().

$(document).ready(function() {
    $("#box")
        .animate({ left: "200px" }, 500)
        .queue(function(next) {
            $(this).css("background", "red");  // change color mid-animation
            next();  // call next() to continue the queue
        })
        .animate({ left: "0px" }, 500);
});

Diagram: Custom Function in Queue

  Queue runs:
  Step 1 → animate left to 200px
  Step 2 → queue() custom function → change color to red → call next()
  Step 3 → animate back to 0px

clearQueue() — Empty the Waiting Queue

The clearQueue() method removes all pending animations from the queue. The current animation finishes, but nothing after it runs.

$(document).ready(function() {
    $("#stopBtn").click(function() {
        $("#box").clearQueue();  // cancel all pending animations
    });
});

stop() vs clearQueue()

Practical: Blinking Notification Badge

$(document).ready(function() {
    function blinkBadge() {
        $("#badge")
            .fadeOut(300)
            .delay(200)
            .fadeIn(300)
            .delay(200)
            .queue(function(next) {
                next();
                blinkBadge();  // repeat indefinitely
            });
    }
    blinkBadge();
});

Quick Summary

• delay(ms) pauses the animation queue for a set number of milliseconds.
• It only works inside jQuery's animation queue — not with CSS or DOM methods.
• jQuery processes queued animations one at a time, in order.
• queue(fn) lets you inject custom functions into the animation sequence.
• clearQueue() cancels all pending animations without stopping the current one.
• Use setTimeout() when you need to delay non-animation actions.