デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery.queue( )キューの取得/設定

構文

アニメーションのキューを取得する返値:配列
jQuery.queue( DOM要素 [,キューの名前] )ver1.3〜
アニメーションのキューを設定する返値:jQueryオブジェクト
jQuery.queue( DOM要素, キューの名前, 配列 )ver1.3〜
jQuery.queue( DOM要素, キューの名前, function )ver1.3〜

機能

第1引数で指定したDOM要素に設定されているアニメーションのキューを取得したり設定します。第2引数にキューの名前を指定して、特定のキューを操作する事ができます。

jQuery.queueメソッドはqueueメソッドと同じ機能で、構文が異なるだけです。第1引数にDOM要素しか設定できないので、あまり使い勝手が良くありません。queueメソッドを使うようにしましょう。
本家サイトでも以下の様にqueueメソッドを勧めています。
Note: This is a low-level method, you should probably use .queue() instead.

解説

キュー情報の取得

jQuery.queueメソッドは引数を設定しないと、第1引数で指定したDOM要素に割り当てられたアニメのキューを取得します。とはいえ、キューの情報は複雑な配列情報のため、実質的にはlengthプロパティを利用して、キューに登録されたアニメの数を取得するくらいしか使わないようです。

サンプル(jQueue/01.html)を開いてbody内の構成にdiv要素とbutton要素があることを確認してください。jQueryはまず、以下の部分を確認して下さい。animateメソッドによってdiv要素のキューにに4つのアニメを登録しています。

$("div").animate({left:300}, 3000);
$("div").animate({top:300}, 3000);
$("div").animate({left:0}, 3000);
$("div").animate({top:0}, 3000);

その後は以下の様に記述されています。jQuery.queueメソッドの引数にjQueryオブジェクトを設定しているように見えますが、後に[0]と追加することでjQueryオブジェクトから最初のDOM要素を取得しています。取得した値は変数「myQueue」に代入し、次の行でlengthプロパティを利用してキュー(配列)の要素数を取り出し、textメソッドによってdiv要素内に表示します。

var myQueue = $.queue($("div")[0]);
$("div").text(myQueue.length);

結果として、buttonクリックするとdiv要素に登録されたアニメの数である「4」が表示されます。

第1引数にDOM要素ではなくjQueryオブジェクトを設定すると、キューが取得できず「0」と表示されます。
→サンプル(jQueue/01b.html

var myQueue = $.queue($("div"));
$("div").text(myQueue.length);

新しいキューと入れ換える

第3引数に新しいキュー(配列)を設定することで、キューの内容を入れ換えることができます。とはいえ、キューの配列を自作することは難しいので実質は空のキューを設定し、登録されたアニメをキャンセルすることくらいしか使わないようです。

サンプル(jQueue/02.html)を開いてbody内の構成がjQueue/01.htmlにbutton(id属性がclear)が追加されただけなのを確認してください。jQueryもdiv要素に4つのアニメが登録されているところは同じです。

異なるのは、以下の様にid属性がclearのbuttonをクリックすると、空の配列をjQuery.queueメソッドの第3引数に設定して、第1引数で指定したdiv要素のキューを空にする点です。第2引数の「キューの名前」は省略することはできません。特にキューの名前を指定しない場合はデフォルトの「fx」を文字列で指定して下さい。

$("button#clear").click(function(){
	$.queue($("div")[0], "fx", []);
});

結果として、div要素がアニメしている時にclearボタンをクリックするとすぐには停止しませんが目的地に着いた時点で停止します

キューにアニメ以外の処理を追加する

第3引数にfunctionを設定することで、キューにアニメ以外の処理を追加することができます。
サンプル(jQueue/03.html)を開いてbody内の構成がjQueue/01.htmlと同じ事を確認してください。

jQueryではアニメの数が2つに減らされ、その後で以下の様にjQuery.queueメソッドの引数にfunctionを利用してキューに処理を追加しています。追加したのはcssメソッドを利用して背景色をピンクにする処理です。

$.queue($("div")[0], "fx", function(){
	$("div").css({backgroundColor:"pink"});
});

結果として、2つのアニメが終わった後にdiv要素の背景色がピンクに変わります。

関連項目

DOM要素で対象を指定するjQuery.queueメソッドよりも、セレクタで対象を指定できるqueueメソッドの方が便利に利用できると思います。