jQueryアニメーションキュー関連

queue()
Queue()メソッドでは、アニメーションキューの長さを得るためのオプションパラメータを受け入れることができます.Queue()メソッドは、キューに追加する新しい関数を表すパラメータとしてコールバック関数を受け入れることができます.ただし、コールバック関数では、スタイル変換などはできますが、アニメーション効果を増やすことはできません.キューがqueue()の関数を実行すると、キューの後ろのアニメーション効果が停止し、dequeue()メソッドが必要になります.
dequeue()
dequeue()メソッドは、一致する要素キューの次の関数を実行するために使用されます.
clearQueue()
DeQueue()メソッドとは異なり、clearQueue()メソッドは、実行されていないすべてのアイテムをキューから削除するために使用されますが、現在のアニメーション効果には影響しません.

  
  
  
  


0
Start
Clear

 

$( "button" ).click(function() {
  showIt()
  $( "div" )
    .animate({ left:"+=200px" }, 2000 )
    .animate({ top:"0px" }, 600 )
    .queue(function() {
      $( this ).toggleClass( "red" ).dequeue();
    })
    .animate({ left:"10px", top:"30px" }, 700 );
});
  function showIt(){
  var num = $('div').queue().length
  $('#num').text(num);
  setTimeout(showIt,10)
}
$('.clear').click(function(){
   $( "div" ).clearQueue()
})