Очередь предстоящих функций
Возвращает или изменяет (в зависимости от переданных параметров) очередь функций.
Дело в том, что к элементам страницы, jQuery привязывает одну или несколько очередей функций. Каждая функции в такой очереди, автоматически вызывается, когда завершится предыдущая. Функции, выполняющие анимационные эффекты, помещаются в такую очередь автоматически. Метод queue() позволяет получать и изменять очереди функций. Имеется два варианта его использования:
Рассмотрим простейший случай образования очереди:
$('#foo').slideUp().fadeIn(); // задаст элементу с идентификатором foo две анимации
в результате, элемент с идентификатором foo начнет выполнять эффект slideUp(), а метод, выполняющий эффект fadeIn() будет помещен в очередь и начнет свое выполнение только после завершения предшествующего метода.
В действии
Создадим очередь функций, выполняющих различные эффекты над div-элементами. После двух из них, установим свои функции (которые будут изменять цвет элемента), с помощью метода queue();:
<!DOCTYPE html>
<html>
<head>
<style>
div{
margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none;
}
div.newcolor{background:blue;}
</style>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
Click here...
<div></div>
<script>
$(document.body).click(function () {
$("div").show("slow"); // сделаем элемент видимым
$("div").animate({left:'+=200'},2000); // переместим элемент на 200 пикселей правее
$("div").queue(function () { // добавим новую функцию в очередь
$(this).addClass("newcolor"); // добавим класс элементу, за счет чего он изменит цвет
$(this).dequeue(); // ! продолжим очередь !
});
$("div").animate({left:'-=200'},500); // переместим элемент на 200 пикселей левее
$("div").queue(function (next) { //добавим новую функцию в очередь
$(this).removeClass("newcolor"); // удалим класс у элемента, за счет чего он вернет прежний цвет
next(); // ! продолжим очередь !
});
$("div").slideUp(); // скроем элемент
});
</script>
</body>
</html>
В результате, после выполнения первых двух анимаций, заданных методами show() и animate() (строки 19 и 20), будет выполнена заданная нами функция, которая добавит новый класс элементам div. Затем, будет выполнена еще одна анимация (метод animate(), строка 25), после чего будет вызван еще один заданный нами метод, который удалит заданный нами класс у div-элементов.