.delay()

.delay( duration [, queueName ] )Возвращает: jQuery

Описание: Установить таймер для задержки выполнения последующих элементов в очереди.

версия добавлена: 1.4.delay( duration [, queueName ] )
- duration
  
  Тип: Целое число
  
  Целое число, указывающее количество миллисекунд, на которое следует отложить выполнение следующего элемента в очереди.
- queueName
  
  Тип: Строка
  
  Строка, содержащая имя очереди. По умолчанию fx, стандартная очередь эффектов.

Добавленный в jQuery в версии 1.4, метод .delay() позволяет отложить выполнение функций, которые следуют за ним в очереди. Он может использоваться со стандартной очередью эффектов или с пользовательской очередью. Задерживаются только последующие события в очереди; например, это не задержит формы .show() или .hide() без аргументов, которые не используют очередь эффектов.

Длительности задаются в миллисекундах; более высокие значения указывают более медленные анимации, а не более быстрые. Строки 'fast' и 'slow' могут быть использованы для указания длительностей 200 и 600 миллисекунд соответственно.

Используя стандартную очередь эффектов, мы можем, например, установить задержку в 800 миллисекунд между .slideUp() и .fadeIn() <div id="foo">:

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

При выполнении этого оператора элемент сдвигается вверх на 300 миллисекунд, затем останавливается на 800 миллисекунд перед тем, как начать поэтапное появление на 400 миллисекунд.

Метод .delay() лучше всего подходит для задержки между очередями эффектов jQuery. Поскольку он ограничен — например, он не предлагает способа отмены задержки — .delay() не является заменой для функции JavaScript setTimeout, которая может быть более подходящей для определённых случаев использования.

Пример:

Анимировать скрытие и показ двух div, отложив первый перед его отображением.

<!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-3.7.0.js"></script>
</head>
<body>
 
<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>
 
<script>
$( "button" ).on( "click", function() {
  $( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
  $( "div.second" ).slideUp( 300 ).fadeIn( 400 );
});
</script>
 
</body>
</html>

.delay( duration [, queueName ] )Возвращает: jQuery

версия добавлена: 1.4.delay( duration [, queueName ] )

Пример:

Демо: