delay()

Категории: Эффекты jQuery > Пользовательская анимация

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

Возвращает: jQuery

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

Аргументы

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

Добавлена в версию: 1.4

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

Целое число

Целое число, указывает количество миллисекунд задержки выполнения следующего элемента в очереди.

имяОчереди

Строка

Строка, содержащая имя очереди. Значение по умолчанию fx, очередь стандартных эффектов.

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

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

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

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

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

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

Пример

Анимации скрытия и отображения двух DIV-ов, с задержкой первого перед показом.

   $("button").click(function() {
      $("div.first").slideUp(300).delay(800).fadeIn(400);
      $("div.second").slideUp(300).fadeIn(400);
    });

Результат выполнения кода выше:

Попробуйте сами

Полный код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <style>
div { width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; }
.second { background-color: #33f;}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>
<body>
	
<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>

	
<script type="text/javascript" language="javascript"> 
   $("button").click(function() {
      $("div.first").slideUp(300).delay(800).fadeIn(400);
      $("div.second").slideUp(300).fadeIn(400);
    });
</script>
</body>
</html>

Была ли эта информация полезной?

Да Нет