jQuery метод .delay()

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

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

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

jQuery синтаксис:

Синтаксис 1.4:
.delay( duration, queueName) 

duration - Number, или String
queueName - String

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

1.4

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

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

Параметр

Описание

duration

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

queueName

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .delay()</title>
		<style>div {
display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */	
width: 75px; /* ширина элемента */	
height: 150px; /* высота элемента */	
margin-right: 20px; /* внешний отступ справа */	
background: orangered; /* цвет заднего фона */	
}
</style>		
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".first" ).click(function(){ // задаем функцию при нажатиии на элемент с классом first
	    $( "div" ).fadeOut()// плавно изменяя прозрачность скрываем все элементы <div>
		      .delay( 1000 ) // устанавливаем задержку 1000 миллисекунд (одна секунда)
		      .fadeIn(); // плавно изменяя прозрачность отображаем все элементы <div>
	  });
	  $( ".second" ).click(function(){ // задаем функцию при нажатиии на элемент с классом second
	    $( "div" ).fadeOut()// плавно изменяя прозрачность скрываем все элементы <div>
		      .delay( "fast" ) // устанавливаем задержку 200 миллисекунд (ключевое слово fast)
		      .fadeIn(); // плавно изменяя прозрачность отображаем все элементы <div>
	  });
	});
		</script>
	</head>
	<body>
		<button class = "first">Delay 1000</button>
		<button class = "second">Delay fast</button>
		<hr>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

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

Результат нашего примера:

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

jQuery эффекты