出列从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

你需要考虑在其中，每个功能能够添加一些队列中的命令的条款。

事情之前有机会动画，队列会这个样子......

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 2

与队列处理是最容易，如果你使用的是传递给回调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 3

简答题：将queue: false选项添加到animate调用函数内，参见this jsFiddle。

朗的答案与解释：

答案通过@ jfriend00是几乎没有在这个意义上，animate呼叫在queue功能本身处理队列中。由于@Amged询问了更多细节，我认为除了提供解决方案之外，我还会填补空白。

在jQuery中每一个元素可以有一组命名队列。默认情况下，在元素上调用animate当动画继续该元素的“FX”队列。同样，调用queue没有明确的队列名称将放置功能的“FX”队列。

因此，发生的事情是animate调用被其包含的queue函数阻塞。

的解决方案是不队列中的动画：

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