jQuery метод .delay()

Определение и применение

jQuery метод .delay() позволяет установить таймер для задержки выполнения последующих функций, которые следуют за ним в очереди.

Обращаю Ваше внимание, что метод .delay() позволяет устанавливать задержку только тем эффектам, которые используют очередь эффектов. Например, метод .delay() не позволяет установить задержку для таких эффектов как .show(), или .hide() без длительности: они выполняются сразу. Вызовы .show(400) и .hide(400) используют очередь и учитывают задержку. Метод можно использовать как со стандартной очередью эффектов, так и с пользовательской очередью.

jQuery синтаксис:

Синтаксис 1.4:

Код
.delay( duration, queueName)

duration - Number, или String

queueName - String

Добавлен в версии jQuery

1.4

Значения параметров

Параметр Описание
duration Строковое или числовое значение (в миллисекундах), которое определяет, какое количество времени будет установлено для задержки выполнения последующих функций, следующих в очереди. Строковые ключевые слова 'fast' и 'slow' соответствуют 200 и 600 миллисекундам соответственно. Чем больше значение, тем больше будет составлять задержка.
queueName Строка, содержащая имя очереди. По умолчанию используется очередь стандартных эффектов fx. Необязательный параметр.

Пример использования

Пример использования jQuery метода .delay()

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html
HTML
<button class="first">Delay 1000</button>
<button class="second">Delay fast</button>
<hr />
<div></div>
<div></div>
<div></div>
main.js
JavaScript
$(document).ready(function () {
    $('.first').click(function () {
        $('div').fadeOut().delay(1000).fadeIn()
    })
    $('.second').click(function () {
        $('div').fadeOut().delay('fast').fadeIn()
    })
})
style.css
CSS
div {
    display: inline-block;
    width: 75px;
    height: 150px;
    margin-right: 20px;
    background: orangered;
}

В этом примере при нажатии на определенную кнопку (элемент <button>) с использованием jQuery метода .fadeOut() плавно изменяя прозрачность скрываем все элементы <div> в документе, после этого устанавливаем задержку, составляющую одну секунду (первая кнопка), либо 200 миллисекунд (вторая кнопка), и с помощью jQuery метода .fadein() плавно изменяя прозрачность отображаем все элементы <div> в документе.