jquery - 从 jQuery 队列出队不起作用

Question

我预计第三个动画将会出列，但事实并非如此，我不知道为什么。这是 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

如果您使用传递给回调的 next 参数，则处理队列是最简单的，但在您的情况下，我认为问题是您正在尝试手动对一个队列进行排队和出队动画函数本身就扰乱了队列。如果您只使用一个不会像这样扰乱队列的普通函数，它应该可以正常工作，并且您可以使用 dequeue() 或者我更喜欢使用 next():

$('#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(next){//queue
    $('#hello').html('the inside queue is done');
    next();
}).animate({left:0},3000,function(){//animation callback
    $('#hello').html('the last queue is done');
});

但是，在这种情况下没有真正的理由使用 .queue 和 .dequeue，因为所有动画都会自动进入队列，因此您可以这样做:

$('#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');
}).animate({left:300},3000, function(){//animation callback
        $('#hello').html('the inside queue is done');
}).animate({left:0},3000,function(){//animation callback
    $('#hello').html('the last queue is done');
});