queueメソッド

queueメソッドを使用すると、要素に関連付けられた関数キューを操作できます。関連するメソッドとしてclearQueueも参照してください。このメソッドは、実行されていないすべての関数をキューから削除することができます。

構文

要素に関連付けられた実行関数のキューを表示するには、次のようにします。オプションのパラメータとしてキュー名（デフォルトはfx - 標準のエフェクトキュー）を文字列で渡すことができます：

javascript.queue([キュー名]);

キューを操作することもできます。これは各要素に対して一度だけ実行されます。2番目のパラメータとして、現在のキューの内容を置き換える関数の配列を渡すことができます：

javascript.queue([キュー名], 新しいキュー );

または、2番目のパラメータとして、キューに追加する新しいコールバック関数を渡すこともできます。この関数は、パラメータとして別の関数を受け取ります。これにより、キューの次のアイテムを自動的に削除し、キューを進めることができます：

javascript.queue([キュー名], function(next) {
  next();
});

各要素は、1つまたは複数のキューを持つことができます。多くのアプリケーションでは1つ（fx）だけが使用されます。キューを使用すると、プログラムの実行を中断することなく、要素に対して一連のアクションを非同期で実行することができます。 queueをコールバック関数とともに呼び出すと、新しい関数をキューの末尾に配置できます。コールバック関数は、セット内の各要素に対して一度ずつ実行されます。 queueを使用して関数を追加する場合、チェーン内の次の関数が実行されるように、後でdequeueメソッドが呼び出されることを確認する必要があります。

例

カスタム関数を追加してみましょう。まず、#animateをクリックすると、右に2秒かけて移動する赤い四角形が表示されます。その後、queueを使用して、四角形を緑色に塗り替えるカスタム関数を追加します（newcolorクラスを追加）。その後、ここでdequeueが呼び出され、関数がキューから削除される様子がわかります。次に、四角形は0.5秒かけて左に移動し、2番目のカスタム関数を使用して元の赤色に戻ります（newcolorクラスを削除）。アニメーションが終了すると、四角形は折りたたまれます：

html<button id="animate">start</button>
<div></div>

cssdiv {
  position: absolute;
  margin: 3px;
  width: 50px;
  height: 50px;
  left: 0px;
  top: 30px;
  background: red;
  display: none;
}

div.newcolor {
  background: green;
}

javascript$('#animate').click(function() {
  $('div')
    .show('slow')
    .animate({left: '+=200'}, 2000)
    .queue(function() {
      $(this).addClass('newcolor').dequeue();
    })
    .animate({left: '-=200'}, 500)
    .queue(function() {
      $(this).removeClass('newcolor').dequeue();
    })
    .slideUp();
});

例

空の配列を追加して前のキューを削除する方法を見てみましょう。#startボタンをクリックすると、前の例と同じアニメーションが表示されます。#stopボタンをクリックすると、空の配列を追加してアニメーションを停止します。再度#startをクリックすると、アニメーションが最初から再開されます：

html<button id="start">start</button>
<button id="stop">stop</button>
<div></div>

cssdiv {
  position: absolute;
  margin: 3px;
  width: 50px;
  height: 50px;
  left: 0px;
  top: 30px;
  background: red;
  display: none;
}
div.newcolor {
  background: green;
}     

javascript$('#start').click(function() {
  $('div')
    .show('slow')
    .animate({left: '+=200'}, 5000)
    .queue(function() {
      $(this).addClass('newcolor').dequeue();
    })
    .animate({left: '-=200'}, 1500)
    .queue(function() {
      $(this).removeClass('newcolor').dequeue();
    })
    .slideUp();
});
  
$('#stop').click(function() {
  $('div').queue('fx', []).stop();
});

関連項目