Метод queue

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

Синтаксис

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

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

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

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

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

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

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

Пример

Давайте добавим пользовательскую функцию. Сначала, после нажатия на #animate, мы покажем красный квадрат, который будет двигаться вправо в течение 2с, затем при помощи queue мы добавим пользовательскую функцию, которая перекрасит квадрат в зеленый, добавив класс newcolor. Как видите, затем здесь вызывается dequeue, чтобы убрать функцию из очереди. Затем наш квадрат будет двигаться влево полсекунды и перекрасится обратно в красный - при помощи второй пользовательской функции мы убираем класс newcolor. По окончанию анимации мы сворачиваем наш квадрат:

html<button id="animate">start</button>
<div></div>

cssdiv {
  position: absolute;
  margin: 3px;
  width: 50px;
  height: 50px;
  left: 0px;
  top: 30px;
  background: red;
  display: none;
}

div.newcolor {
  background: green;
}

javascript$('#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 анимация будет начинаться заново:

html<button id="start">start</button>
<button id="stop">stop</button>
<div></div>

cssdiv {
  position: absolute;
  margin: 3px;
  width: 50px;
  height: 50px;
  left: 0px;
  top: 30px;
  background: red;
  display: none;
}
div.newcolor {
  background: green;
}     

javascript$('#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();
});

Смотрите также