Question

I’m expecting that the 3rd animation is going to be dequeued but it isn’t and I don’t know why. Here’s a demo.

$('#di').animate({left:300},3000,function(){//animation callback
    $('#hello').html('1st is done');
}).animate({left:0},3000,function(){//animation callback
    $('#hello').html('2nd is done');
}).queue(function(){//queue
    $(this).animate({left:300},3000,
    function(){//animation callback
        $('#hello').html('the inside queue is done');
        $(this).dequeue();
    })
}).animate({left:0},3000,function(){//animation callback
    $('#hello').html('the last queue is done');
});

Answer 1

You need to think in terms of the order in which each function is able to add something to the queue.

Before anything has a chance to animate, the queue will look like this…

animate  // left:300
callback
animate  // left:0
callback
callback via queue
animate  // left:0
callback

Keep in mind that all this occurs before anything has started.

The trouble is that your dequeue is being added in the callback to an animation that takes place in the your queue() callback. This means that new callback gets placed on the end of the queue…

animate   // run, then automatically dequeue
callback  // run, then automatically dequeue
animate   // run, then automatically dequeue
callback  // run, then automatically dequeue
callback via queue  // run, place the new animation and callback on the end +
animate  //                                                                 |
callback //                                                                 |
                                                                            |
animate  // <---------------------------------------------------------------+
callback // The dequeue() happens in here

So you can see, that you dequeue is stuck on the end, so the queue is stuck after your queue() callback.