jQuery データ - jQuery.queue() メソッド

jQuery データリファレンスマニュアル

例

キューの長さを表示します：

function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );      
  setTimeout(showIt, 100);
}

自分で試してみてください

定義と使用法

queue()メソッドは、一致する要素上で実行される関数キューを表示または操作します。

注釈：これは低レベルのメソッドです；以下を使用して .queue() より便利です。

文法

.queue(queueName)
パラメータ 説明
queueName オプション。シーケンスの名前を含む文字列値。デフォルトはfxで、標準の効果シーケンスです。

キュー操作

queue()メソッドは、一致する要素上で実行される関数キューを操作します。

文法

.queue(queueName,newQueue)
パラメータ 説明
queueName オプション。シーケンスの名前を含む文字列値。デフォルトはfxで、標準の効果シーケンスです。

詳細な説明

各要素は、jQueryが追加する一つまたは複数の関数キューを持つことができます。多くのアプリケーションでは、一つのキュー（fxと呼ばれる）を使用しています。キューは要素上で非同期にアクションシーケンスを呼び出し、プログラムの実行を停止しません。典型的な例は、要素上で複数のアニメーションメソッドを呼び出すことです。例えば：

$('#foo').slideUp().fadeIn();

この文が実行されると、要素は即座にスライドアニメーションを開始しますが、フェードイントランジションは fx キューに置かれ、スライドアニメーションが完了した後に呼び出されます。

.queue() メソッドは、この関数キューに対して直接操作を許可します。コールバック関数を持つ .queue() メソッドを呼び出すことは特に有用です；これにより、キューの末端に新しい関数を追加できます。

この機能はアニメーションメソッドが提供するコールバック関数に似ていますが、アニメーション実行中にコールバック関数を設定する必要はありません。

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('アニメーションが完了しました.');
  $(this).dequeue();
});;

等価です：

$('#foo').slideUp(function() {
  alert('アニメーションが完了しました.');
);

注意：.queue() を通じて関数を追加する際には、最終的に .dequeue() を呼び出すことを確認してください。これにより、次のキューの関数が実行されます。

例 1

カスタム関数に対してキュー操作を行います：

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

自分で試してみてください

例 2

キュー配列を設定してキューを削除します：

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

自分で試してみてください

jQuery データリファレンスマニュアル