# .delay()

Categories: Effects > Custom

## .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] )

  durationAn integer indicating the number of milliseconds to delay execution of the next item in the queue.

  queueNameA 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">`:

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

    <!DOCTYPE html>
    <html>
    <head>
      <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="http://code.jquery.com/jquery-1.7rc2.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: