# .delay()

## delay ( duration, queueName ) Returns: jQuery version added: 1.4

- 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.

Description: Set a timer to delay execution of subsequent items in the 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">`:

    $( "#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.

## Examples:

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

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css 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="//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: