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>

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