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

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

構文

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

機能

jQueryオブジェクトで指定した要素に設定されたアニメーションのキューを取得したり設定します。第1引数にキューの名前を指定して、特定のキューを操作する事ができます（キューについてはanimateメソッドで説明しています）。

解説

キュー情報の取得

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

サンプル（queue/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);

その後は以下の様に記述され、queueメソッドにlengthプロパティを利用してキュー（配列）の要素数を取り出して変数qNumに代入しています。そしてtextメソッドによってqNumの値をdiv要素内に表示します。 

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

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

サンプルqueue/01.htmlでは、アニメを開始する時のキューの数しか表示しませんが、buttonを追加してクリックするごとにdiv要素に表示されるキューのアニメ数を更新するようなサンプルを作成しました。

サンプル（queue/01b.html）を開いてid属性がcheckのbutton要素が追加されたことを確認してください。これをクリックするとdiv要素内にキューのアニメ数を表示するようにしてあります。色々なタイミングでbuttonをクリックして徐々にアニメの数が減っていくことを確認してください。

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

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

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

異なるのは、以下の様にid属性がclearのbuttonをクリックすると、空の配列をqueueメソッドの引数に設定して、div要素のキューを空にする点です。 

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

結果として、div要素がアニメしている時にclearボタンをクリックするとすぐには停止しませんが目的地に着いた時点で停止します。この処理はstopメソッドでは実現できないアニメの止め方ですので、覚えておくと良さそうです。また、この処理はclearQueueメソッドを利用しても可能です。
→リファレンス：.clearQueue() - queueメソッドでも同じ事ができます

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

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

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

$("div").animate({left:300}, 3000);
$("div").animate({top:300}, 3000);
$("div").queue(function(){
	$("div").css({backgroundColor:"pink"});
})

結果として、2つのアニメが終わった後でキューに追加された処理が実行され背景色がピンクに変わります。

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

アニメは完了したら自身をキューから削除し、次のアニメを実行するようになっています。しかしqueueメソッドで追加されたアニメ以外の処理は「自動ではキューを削除しない」ため、次のアニメに移りません。

サンプル（queue/04.html）を開いてbody内の構成がqueue/03.htmlと同じ事を確認してください。jQueryもほとんど同じで、異なるのは以下の様にqueueメソッドで追加したfunction内で背景色をピンクにする処理に後に左に移動するアニメを追加した点だけです。 

$("div").animate({left:300}, 3000);
$("div").animate({top:300}, 3000);
$("div").queue(function(){
	$("div").css({backgroundColor:"pink"});
	$("div").animate({left:0}, 3000);
});

しかし、buttonをクリックしてアニメを実行しても背景色をピンクにした時点で停止し追加した左に移動するアニメは再生されません。この結果からもアニメ以外の処理は自動的に次のアニメを実行しないことを確認できます。

この問題を解決するにはdequeueメソッドを利用します。これはキューにある現在の処理を削除し、強制的に次の処理を開始させます。サンプル（queue/04b.html）を開いて、以下の様にcssメソッドの後にdequeueが追加されていることを確認してください。 

$("div").queue(function(){
	$("div").css({backgroundColor:"pink"}).dequeue();
	$("div").animate({left:0}, 3000);
});

結果として、背景色をピンクにしたあとのアニメが実行されるようになります。キューにアニメ以外の処理を追加する場合はdequeueメソッドを利用することを覚えておきましょう。

サンプルqueue/03c.htmlのdequeueはメソッドチェーンでcssメソッドの後に連結していますが、メソッドチェーンを利用しないと以下の様になります。これでもqueue/03c.html同様に機能します。
→サンプル（queue/04c.html） 

$("div").queue(function(){
	$("div").css({backgroundColor:"pink"});
	$("div").dequeue();
	$("div").animate({left:0}, 3000);
});

関連項目

queueメソッドでアニメ以外の処理を追加した場合は、dequeueメソッドを利用しないと次のキュー処理に入りません。

clearQueueメソッドを利用するとキューを空（カラ）にすることができます。これはqueueメソッドの引数に空の配列を設定したのと同じ効果を持ちます。

関連項目

v1.4から追加された機能

あまりメリットが理解できないのですが、本家ページでv1.4から利用できるテクニックの説明があったのでメモ。

まずはテクニックを利用していないサンプル（queue/test01.html）を開いて、以下の様にjQueryが記述されていることを確認してください。このサンプルでは4〜6行目でアニメでない処理を追加しているため自動的に次のキューの処理に進まず、7行目のアニメは実行されません。 

$("button#start").click(function(){
	$("div").animate({left:300}, 1000);
	$("div").animate({top:300}, 1000);
	$("div").queue(function(){
		$("div").css({backgroundColor:"pink"});
	});
	$("div").animate({left:0}, 1000);
});

実際にbuttonをクリックしても、背景色がピンクになった時点で停止してしまいます。
このような時はdequeueメソッドを利用すれば良いのですが、v1.4からは別の方法も選択できます。

サンプル（queue/test01b.html）を開いて、以下のqueueメソッドで追加している処理を確認してください。queueメソッドの引数に設定したfunctionに「next」と引数が追加され、背景色を変更する処理の後にnextを実行しています。 

$("div").queue(function(next){
	$("div").css({backgroundColor:"pink"});
	next();
});

こうするとdequeueメソッドと同じようにキューの次の処理が実行されるため、最後のアニメ（左に移動するアニメ）も実行されます。

これはv1.2から利用できるdequeueメソッドと同じですが、dequeueメソッドよりも「次の処理」に進むということが分かりやすいと思います。