How jQuery delay() Works in an Animation Queue

This article provides an overview of how the jQuery delay() method operates within the animation queue system. You will learn the mechanics behind queued execution, how delay() pauses subsequent queue actions without blocking the JavaScript runtime, and the distinction between queued animation methods and standard non-queued jQuery operations.

The Animation Queue Mechanism

jQuery manages animations using an internal queue, which operates on a First-In, First-Out (FIFO) basis. By default, every animation method—such as fadeIn(), slideUp(), and animate()—is automatically added to the standard animation queue named fx. When an animation begins, the queue processes each operation one by one, executing the next task only after the current task finishes.

How delay() Operates

The delay() method is a queue-manipulation function designed specifically to pause the execution of items within a queue. When you call .delay(duration), jQuery inserts a timer function directly into the queue at that specific point in the chain.

When the queue runner reaches the delay() entry:

  1. It reads the specified duration in milliseconds.
  2. It pauses the queue by setting an internal setTimeout timer.
  3. The browser's main JavaScript thread remains unblocked, allowing user interactions, page rendering, and other scripts to execute normally.
  4. Once the timer expires, the queue automatically calls its internal dequeue() method, triggering the execution of the next queued animation.
// Example of delay in an animation queue
$("#box")
  .slideDown(500)
  .delay(1000) // Pauses the 'fx' queue for 1 second
  .fadeOut(500); // Runs only after the 1-second delay completes

Queued Methods vs. Non-Queued Methods

A common point of confusion is using delay() with standard, non-animation jQuery methods. Operations like .css(), .addClass(), or .text() do not use the fx queue; they execute instantaneously when the script runs.

If you place .css() after a .delay(), the style applies immediately, ignoring the pause:

// Incorrect usage: .css() is not queued
$("#box")
  .delay(1000)
  .css("color", "red"); // Executes immediately, not after 1000ms

To delay non-animation methods, they must be manually inserted into the queue using .queue():

// Correct usage for non-queued methods
$("#box")
  .delay(1000)
  .queue(function(next) {
    $(this).css("color", "red");
    next(); // Calls the next item in the queue
  });

Queue Control and Cancellation

Because delay() creates a scheduled queue step, it respects jQuery's queue control methods:

  • .stop(): Calling .stop() without arguments halts the current animation, but if called during a delay, it may not immediately clear future delays depending on parameters.
  • .stop(true, false): Clears the queue, canceling both the running timer and any subsequent queued animations.
  • .clearQueue(): Removes all unexecuted functions from the queue, including scheduled delay() timers that have not yet triggered.