Question

我期待第3部动画将会出局，但事实并非如此，我不知道为什么。这是一个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');
});

Answer 2

您需要考虑每个函数能够向队列添加内容的顺序。

在任何有机会动画之前，队列将如下所示......

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

请记住，所有这些都发生在任何事情开始之前。

问题是，您的dequeue正在回调中添加到您的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

所以你可以看到，你出列的队列被卡在了最后，所以队列在queue()回调后被卡住了。

Answer 3

简短回答：将queue: false选项添加到animate函数内的queue来电，请参阅this jsFiddle。

长解释说明：

@ jfriend00的答案几乎就在animate函数中的queue调用本身处理队列的意义上。由于@Amged要求提供更多细节，我认为除了提供解决方案外，我还要填补空白。

在jQuery中，每个元素都可以有一组命名队列。默认情况下，当在元素上调用animate时，动画会在该元素的'fx'队列上进行。同样，在没有显式队列名称的情况下调用queue会将函数放在'fx'队列中。

因此，animate调用被包含queue函数阻止了。{/ p>

解决方案是不对动画进行排队：

$('#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}, {
        duration: 3000,
        // Don't queue the animation, otherwise it gets queued on the default
        // queue ('fx') and since we're currently running in this queue, it
        // would block
        queue: false,
        complete: 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');
});

正如我在回答开头所提到的，你可以找到work demo here。

从jQuery队列中出队不起作用

3 个答案: