Метод queue

Метод queue позволяет нам работать с очередью функций, привязанных к элементу. Смотрите также метод clearQueue, который позволяет нам удалить из очереди все функции, которые не были запущены.

Синтаксис

Так мы показываем очередь выполняемых функций, привязанных к элементу. Можно передать необязательным параметром название очереди в виде строки (по умолчанию fx - стандартная очередь эффектов):

.queue([имя очереди]);

Мы можем манипулировать очередью. Выполняется один раз для каждого элемента. Для этого можно передать вторым параметром массив функций, которые заменят содержание текущей очереди:

.queue([имя очереди], новая очередь );

А можно вторым параметром передать новую callback-функцию для добавления в очередь. Эта функция в свою очередь получает другую функцию в качестве параметра. Это позволяет автоматически убирать из очереди следующий элемент и двигать очередь:

.queue([имя очереди], callback-функция(next) {
	next();
});

Каждый элемент может иметь одну или несколько очередей. Во многих приложениях используется только одна (fx). Очереди позволяют осуществлять последовательность действий с элементом асинхронно, без прерывания выполнения программы. Вызов queue c callback-функцией позволяет нам поместить новую функцию в конец очереди. callback-функция выполняется один раз для каждого элемента в наборе. При добавлении функции с помощью queue, мы должны убедится, что потом будет вызван метод 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,
который позволяет выполнить следующую функцию в очереди функций