jQuery .delay() Method

What You’ll Learn

The .delay() instance method inserts a timed pause into jQuery’s effects queue. This tutorial covers the duration and queueName parameters since jQuery 1.4, why instant show/hide is not delayed, comparisons with setTimeout and .queue(fn), staggered reveal patterns, named custom queues, and five hands-on examples from the official jQuery API.

Introduction

Chained jQuery effects run one after another on the default fx queue. Sometimes you need a visible gap between steps — a beat after a slide finishes before a fade begins, or a staggered entrance for list items. That is what .delay() is for.

Available since jQuery 1.4, .delay() enqueues a timer step rather than animating CSS. It returns the same jQuery object for chaining, and the next queued function runs only after the delay elapses and any prior queue items complete.

Understanding the .delay() Method

.delay( duration [, queueName ] ) accepts a duration in milliseconds or the strings "fast" and "slow". The optional queueName targets a named queue other than the default fx effects pipeline.

.delay() does not change element styles and does not delay instant operations. It only postpones the next item already sitting on the queue — typically another effect like .fadeIn() or a function added with .queue().

📝 Syntax

Single signature for .delay:

jQuery( selector ).delay( duration [, queueName ] )

Parameters

• duration (Number or String) — pause length in milliseconds, or "fast" (200) / "slow" (600).
• queueName (String, default "fx") — name of the queue where the delay is inserted.

Return value

• A jQuery object for chaining further queued methods on the same set.

Official jQuery API description

// Pause 800ms between slideUp and fadeIn on div.first only
$( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
$( "div.second" ).slideUp( 300 ).fadeIn( 400 );
// div.first waits; div.second fades in immediately after slideUp

Examples Gallery

Each example demonstrates an official jQuery API .delay() pattern. Open DevTools or use the Try-it links. All five mirror live demos on api.jquery.com/delay/.

$( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
$( "div.second" ).slideUp( 300 ).fadeIn( 400 );

div.first: slide up → 800ms hold → fade in (total gap visible)
div.second: slide up → fade in immediately (no pause between steps)

$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );

#foo collapses upward over 300ms, stays hidden for 800ms, then fades back over 400ms

$( ".box" ).each( function( i ) {
  $( this ).delay( i * 400 ).fadeIn( 400 );
});

Box 0 fades at 0ms, box 1 at 400ms, box 2 at 800ms — cascading entrance

var $el = $( "#panel" );
$el
  .queue( "tasks", function( next ) {
    $( this ).text( "Step 1" );
    next();
  })
  .delay( 500, "tasks" )
  .queue( "tasks", function( next ) {
    $( this ).text( "Step 2 — after 500ms pause" );
    next();
  });
$el.dequeue( "tasks" );

Text shows "Step 1" immediately, waits 500ms on "tasks" queue, then updates to Step 2

var $box = $( "#box" );
$box.slideUp( 300 ).delay( 2000 ).fadeIn( 400 );
// User clicks Cancel before fadeIn would start
$( "#cancel" ).on( "click", function() {
  $box.clearQueue();
});

Without cancel: slideUp → 2s pause → fadeIn
With clearQueue during pause: element stays hidden; fadeIn is dropped from fx queue

🚀 Common Use Cases

• Breathing room between effects — pause after .slideUp() before .fadeIn() so the user registers the transition.
• Staggered list entrances — multiply index by a delay constant for cascading menu or card reveals.
• Sequential messaging — chain text updates on a custom queue with .delay() between steps.
• Tooltip or toast timing — show, delay, then hide within one fluent chain instead of nested timers.
• Animation storyboards — combine .animate(), .delay(), and shorthand effects into readable timelines.
• Cancellable sequences — pair long .delay() chains with .clearQueue() for skip or interrupt UX.

📝 Notes

• Available since jQuery 1.4; signature .delay(duration [, queueName]).
• "fast" = 200 ms, "slow" = 600 ms — same mapping as other effect methods.
• Only delays subsequent queued items; instant .show(), .hide(), and .css() are unaffected.
• Returns a jQuery object for method chaining on the same matched set.
• .clearQueue() and .stop(true) remove pending delays along with waiting effects.
• Set jQuery.fx.off = true globally and delay durations collapse to zero like other fx timings.

💡 Best Practices