## .delay( duration [, queueName ] )Returns: jQuery

Description: Set a timer to delay execution of subsequent items in the queue.

- #### version added: 1.4.delay( duration [, queueName ] )

  - duration
    Type: Integer
    An integer indicating the number of milliseconds to delay execution of the next item in the queue.
  - queueName
    Type: String
    A string containing the name of the queue. Defaults to `fx`, the standard effects queue.

Added to jQuery in version 1.4, the `.delay()` method allows us to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue. Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of `.show()` or `.hide()` which do not use the effects queue.

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings `'fast'` and `'slow'` can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

Using the standard effects queue, we can, for example, set an 800-millisecond delay between the `.slideUp()` and `.fadeIn()` of `<div id="foo">`:

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

When this statement is executed, the element slides up for 300 milliseconds and then pauses for 800 milliseconds before fading in for 400 milliseconds.

The `.delay()` method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—`.delay()` is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

## Example:

Animate the hiding and showing of two divs, delaying the first before showing it.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>delay demo</title>  <style>  div {    position: absolute;    width: 60px;    height: 60px;    float: left;  }  .first {    background-color: #3f3;    left: 0;  }  .second {    background-color: #33f;    left: 80px;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body> <p><button>Run</button></p><div class="first"></div><div class="second"></div> <script>$( "button" ).click(function() {  $( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );  $( "div.second" ).slideUp( 300 ).fadeIn( 400 );});</script> </body></html>

#### Demo: