jQuery метод .delay()

jQuery эффекты

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

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. Необязательный параметр.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .delay()</title>
		<style></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 метода .delay()
jQuery эффекты