# Метод 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`,
  который позволяет выполнить следующую функцию в очереди функций

← →
↑