jQueryキューからのデキューが機能しない

Question

3番目のアニメーションがデキューされると予想されますが、デキューされていないため、その理由がわかりません。ここにはdemoがあります。あなたは、コールバックに渡される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(){//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

：あなただけのこの操作を行うことができるように、すべてのアニメーションが自動的にキューに行くように、この場合の.queueと.dequeue 。

何がアニメーション化する機会を得る前に、キューは次のようになります...

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

が最も簡単ですが、あなたのケースで、私はこの問題は、手動でキューに入れ、アニメーション機能をデキューしようとしているということだと思うことそれ自体が待ち行列を乱している。

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

をしかし、使用する本当の理由はありません：あなたはこのようなキューと混乱しないし、あなたがdequeue()またはI 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'); 
}).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によって

答えはqueue機能でanimate呼び出し自体がキューを扱っているという意味ではほとんどがあります。 @Amgedは詳細を尋ねたので、私はソリューションを提供するだけでなく、空白を埋めると思った。

jQueryでは、各要素は名前付きキューのセットを持つことができます。デフォルトでは、要素上でanimateを呼び出すと、アニメーションはその要素の 'fx'キューに入ります。同様に、明示的なキュー名を持たないでqueueを呼び出すと、その関数は 'fx'キューに置かれます。

したがって、animateコールが含まれていることによってブロックされているのは、queue機能です。私の答えの冒頭で述べたように、あなたがwork demo hereを見つけることができます

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

：

ソリューションはないキューアニメーションにあります。