Метод queue - работа с очередью функций
Метод ⁅с⁆queue⁅/с⁆ позволяет нам работать с очередью функций, привязанных к элементу. Смотрите также метод ⁅с href="/ru/javascript/lib/jquery/manual/clearQueue/"⁆clearQueue⁅/с⁆, который позволяет нам удалить из очереди все функции, которые не были запущены.
Синтаксис
Так мы показываем очередь выполняемых функций,
привязанных к элементу. Можно передать
необязательным параметром название очереди
в виде строки (по умолчанию fx - стандартная
очередь эффектов):
.queue([имя очереди]);
Мы можем манипулировать очередью. Выполняется один раз для каждого элемента. Для этого можно передать вторым параметром массив функций, которые заменят содержание текущей очереди:
.queue([имя очереди], новая очередь );
А можно вторым параметром передать новую callback-функцию для добавления в очередь. Эта функция в свою очередь получает другую функцию в качестве параметра. Это позволяет автоматически убирать из очереди следующий элемент и двигать очередь:
.queue([имя очереди], callback-функция(next) {
next();
});
Каждый элемент может иметь одну или несколько
очередей. Во многих приложениях используется только
одна (fx). Очереди позволяют осуществлять
последовательность действий с элементом асинхронно,
без прерывания выполнения программы.
Вызов ⁅с⁆queue⁅/с⁆ c callback-функцией позволяет нам
поместить новую функцию в конец очереди. callback-функция
выполняется один раз для каждого элемента в наборе.
При добавлении функции с помощью ⁅с⁆queue⁅/с⁆, мы
должны убедится, что потом будет вызван метод
⁅с href="/ru/javascript/lib/jquery/manual/hide/"⁆dequeue⁅/с⁆,
для того чтобы следующая функция в цепочке заработала.
Пример
Давайте добавим пользовательскую функцию. Сначала,
после нажатия на #animate, мы покажем красный квадрат,
который будет двигаться вправо в течение 2с,
затем при помощи ⁅с⁆queue⁅/с⁆ мы добавим
пользовательскую функцию, которая перекрасит квадрат
в зеленый, добавив класс newcolor. Как видите,
затем здесь вызывается ⁅с⁆dequeue⁅/с⁆, чтобы убрать
функцию из очереди. Затем наш квадрат будет двигаться
влево полсекунды и перекрасится обратно в красный - при
помощи второй пользовательской функции мы убираем
класс newcolor. По окончанию анимации мы
сворачиваем наш квадрат:
<button id="animate">start</button>
<div></div>
div {
position: absolute;
margin: 3px;
width: 50px;
height: 50px;
left: 0px;
top: 30px;
background: red;
display: none;
}
div.newcolor {
background: green;
}
$('#animate').click(function() {
$('div')
.show('slow')
.animate({left: '+=200'}, 2000)
.queue(function() {
$(this).addClass('newcolor').dequeue();
})
.animate({left: '-=200'}, 500)
.queue(function() {
$(this).removeClass('newcolor').dequeue();
})
.slideUp();
});
Пример
Давайте добавим очередь в виде массива, чтобы удалить
предыдущую. При нажитии на кнопку #start мы будем
видеть анимацию из предыдущего примера. При нажатии на
кнопку #stop мы будем останавливать анимацию путем
добавления пустого массива. При повторном нажатии на
#start анимация будет начинаться заново:
<button id="start">start</button>
<button id="stop">stop</button>
<div></div>
div {
position: absolute;
margin: 3px;
width: 50px;
height: 50px;
left: 0px;
top: 30px;
background: red;
display: none;
}
div.newcolor {
background: green;
}
$('#start').click(function() {
$('div')
.show('slow')
.animate({left: '+=200'}, 5000)
.queue(function() {
$(this).addClass('newcolor').dequeue();
})
.animate({left: '-=200'}, 1500)
.queue(function() {
$(this).removeClass('newcolor').dequeue();
})
.slideUp();
});
$('#stop').click(function() {
$('div').queue('fx', []).stop();
});
Смотрите также
-
метод
animate,
который анимирует свойства элементов -
метод
clearQueue,
который позволяет удалить все невыполненные элементы из очереди функций -
метод
dequeue,
который позволяет выполнить следующую функцию в очереди функций