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

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

例

キューの長さを表示：

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

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

定義と用法

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

语法

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

操作キュー

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

语法

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

詳細な説明

各要素は、jQueryが追加する1つ以上の関数キューを持つことができます。多くのアプリケーションでは、1つのキュー（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 データリファレンスマニュアル