[Функция] delay(duration,[queueName ])
Раздел "Effects"
установка задержки для выполнения последующей функции в очереди.
delay(duration,[queueName ])
1.4
duration: целое число, указывающее количество миллисекунд задержки для выполнения последующей функции в очереди.
queueName: строка, содержащая название очереди.
Если несколько анимации поставлены в очередь (и аргумент clearQueue не возвращает true), функция будет выполнена немедленно.
Данный метод был добавлен в jQuery 1.4, метод позволяет установить период для задержки выполнения последующей функции в очереди функций. Метод может применяться для очереди со стандартными эффектами и для очереди пользовательских методов. К примеру, при использовании стандартных эффектов fadeIn и fadeout между ними может быть установлена задержка в количество 8000 миллисекунд для элемента с id foo:
<codeinp>
$('#foo').slideUp(300).delay(800).fadeIn(400);
В данной строке сначала будет выполнен метод slideUp, после него будет запущена задержка(800 мс.), затем будет запущен метод fadeIn.<codeinp>
Пример:
Нажмите кнопку Go, чтобы запустить анимацию, затем нажмите кнопку STOP, чтоб остановить анимацию в том месте, где она находится в текущий момент. Другой вариант - нажмите нескольких кнопок создав очередь анимации, и намлюдайте как функция stop прекращает текущую анимацию.
"jQuery"
$("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},1500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
$("#stop").click(function () {
$("div").clearQueue();
$("div").stop();
});
"HTML"
<button id="start">Start</button>
<button id="stop">Stop</button>
"CSS"
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},1500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
$("#stop").click(function () {
$("div").clearQueue();
$("div").stop();
});
});
</script>
</head>
<body class="iframe">
<button id="start">Start</button>
<button id="stop">Stop</button>
</body>
</html>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
Версия jQuery 1.4.2
Документ создан 2010-08-21