Несколько очередей в JQuery

Question

У меня проблемы с использованием нескольких очередей в jQuery. Рассмотрим следующий пример:

$('#example').click(function() {
  $(this).delay(1000, 'fx2').queue('fx2', function() {
    alert('here');
  });
});

Предупреждение никогда не срабатывает. Почему?

Answer 1

Кажется, что при вызове delay (или любой другой анимации в этом отношении) в пользовательской очереди необходимо также сначала запустить эту очередь, используя .dequeue()

Когда вызывается .dequeue(), следующая функция в очереди удаляется из очереди и затем выполняется. Эта функция должна в свою очередь (прямо или косвенно) вызывать .dequeue(), чтобы последовательность могла продолжаться.

$('#example').click(function() {
  $(this).delay(1000, 'fx2').queue('fx2', function(next) {
    alert('here');
    // start the next anim in the queue...
    next();
  }).dequeue('fx2');
});

jsbin preview

Обратите внимание, что обратный вызов на queue получает функцию в качестве первого аргумента. Это функция, которую вы хотите вызывать всякий раз, когда завершается ваша «анимация», чтобы можно было выполнить следующий элемент в очереди.

Код jQuery обрабатывает «автоматический запуск» очереди fx в функции $.fn.queue() :

if ( type === "fx" && queue[0] !== "inprogress" ) {
  jQuery.dequeue( this, type );
}

Answer 2

Попробуйте следующий jsFiddle пример.Кажется, работает и делает то, что вы хотите.