jQuery функция .delay()
Раздел: Эффекты jQuery
.delay( продолжительность, [ имя Очереди ] )
- Продолжительность: Целое число, указывает количество миллисекунд задержки выполнения следующего элемента в очереди.
- имя Очереди: Строка, содержащая имя очереди. Значение по умолчанию fx, очередь стандартных эффектов.
Продолжительность
Продолжительность указывается в миллисекундах; более высокие значения указывают о медленной анимации, а не быстрой. Значения fast и slow могут быть использованы для указания продолжительности в 200 и 600 миллисекунд, соответственно.
Используя стандартные эффекты очереди, мы можем, например, установить задержку в 800 - миллисекунд между выполнением .slideUp() и .fadeIn() в коде
<div id="foo">...</div>
$('#foo').slideUp(300).delay(800).fadeIn(400);
В этом выражении, элемент скользит вверх в течении 300 миллисекунд, а затем пауза на 800 миллисекунд перед появлением в течение 400 миллисекунд
jQuery.delay() это лучшее для задержки в очереди эффектов jQuery, но он не заменяет родную функцию JavaScript setTimeout(), которая может быть более подходящая для использования в некоторых случаях.
Живые примеры:
<!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>
Анимируйте скрытие и показ двух Дивов, откладывая первый, прежде чем показать его.