Multiple Queues in jQuery

Question

I am having problems using multiple queues in jQuery. Consider the following example:

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

The alert never fires. Why?

Answer 1

Try the following jsFiddle example. It seems to work and do what you want.

Answer 2

It seems when calling delay (or any other animations for that matter) on a custom queue you need to also set that queue in motion first using .dequeue()

When .dequeue() is called, the next function on the queue is removed from the queue, and then executed. This function should in turn (directly or indirectly) cause .dequeue() to be called, so that the sequence can continue.

$('#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

Note that the callback on queue receives a function as its first argument. This is the function you want to call whenever your "animation" is finished so that the next item in the queue can execute.

The jQuery code handles 'auto-starting' the fx queue in the $.fn.queue() function:

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