jQuery функция .delay()

Раздел: Эффекты jQuery

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

.delay( продолжительность, [ имя Очереди ] )

  1. Продолжительность: Целое число, указывает количество миллисекунд задержки выполнения следующего элемента в очереди.
  2. имя Очереди: Строка, содержащая имя очереди. Значение по умолчанию fx, очередь стандартных эффектов.

Продолжительность

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

Используя стандартные эффекты очереди, мы можем, например, установить задержку в 800 - миллисекунд между выполнением .slideUp() и .fadeIn() в коде

html:
<div id="foo">...</div>
javascript:
$('#foo').slideUp(300).delay(800).fadeIn(400);

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

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

Живые примеры:

html:

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

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