queue()
Метод queue() позволяет получить или изменить очередь функций.
Очередь анимационных эффектов
Для одного элемента страницы может быть установлено несколько анимационных эффектов. При этом каждая последующая анимация запускается только по завершении предыдущей. Любая анимация представляет собой выполняющуюся функцию, причём она может быть довольно продолжительной. Постановка таких функций в очередь позволяет выполнять дальнейшие операции в скрипте, не дожидаясь завершения анимации, то есть анимационные эффекты выполняются асинхронно. Пример:
jQ_object
.animate({width: 500}, 3000)
.animate({height: 500}, 3000);
В данном примере для выбранного элемента будет создана очередь из двух анимационных эффектов, первый из которых сразу автоматически запустится. Второй эффект запустится по окончании первого. В общем же потоке скрипта данная запись воспринимается не как продолжительный процесс, а всего лишь как добавление двух функций в очередь. При этом дальнейшие действия скрипта выполняются без задержки.
Каждый элемент может иметь одну или несколько очередей выполняемых функций. В большинстве случаев используется одна стандартная очередь с именем
.fx
Варианты использования
jQ_object.queue([имя_очереди]) => Array- Возвращает очередь функций в виде массива. Если имя очереди не указано, тогда возвращается стандартная очередь
.fx jQ_object.queue([имя_очереди, ]функция) => jQuery- Добавляет в указанную очередь заданную функцию. Последующие функции в очереди не запустятся. Чтобы продолжить выполнение функций в очереди, необходимо в конце добавленной функции вставить строку
$(this).dequeue(). Если имя очереди не указано, тогда функция добавляется в стандартную очередь
.fx jQ_object.queue([имя_очереди, ]массив_функций) => jQuery- Заменяет указанную очередь на новую, которая представлена массивом функций. Если имя очереди не указано, тогда заменяется стандартная очередь
.fx
Примеры
<html>
<head>
<title>Анимация в jQuery</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<button class="button_start">Старт</button>
<button class="button_stop">Стоп</button>
<div style="width: 50px; height: 50px; background: coral; position: relative"></div>
</body>
</html>
<script>
var elem = $('div');
$('.button_start').on('click', function start() {
elem
.animate({left: '+=150'}, 'slow')
.animate({left: '-=150'}, 'slow')
/* Добавлена функция для циклического запуска анимации */
.queue(function() {
start();
$(this).dequeue();
});
});
$('.button_stop').on('click', function() {
/* Замена на пустую очередь приводит к остановке анимации */
elem.queue([]);
});
/* Отслеживание кол-ва функций в очереди */
setInterval(function() {
elem.text(elem.queue().length);
}, 100);
</script>