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

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

jQuery.dequeue( )次のキュー処理を実行

構文

次のキュー処理を実行返値:なし
jQuery.dequeue( DOM要素 [,キューの名前] )ver1.3〜

機能

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

animateメソッドなどのアニメは完了すると自動的に次のキューの処理に進みます。それに対しjQuery.queueメソッドによって追加された、アニメ以外の処理は完了してもキューの次の処理に進みません。そのため、そこでキューが停止してしまいます。この問題を解決するのがjQuery.dequeueメソッドです。

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

解説

jQuery.queueを利用しないと...

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

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

その後で以下の様にjQuery.queueメソッドの第3引数にfunctionを利用してアニメではない処理をキューに追加しています。追加したのはcssメソッドを利用して背景色をピンクにする処理と、animateメソッドで左に移動する処理です。

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

結果として、buttonをクリックすると2つのアニメ(右に移動するアニメと下に移動するアニメ)が再生されます。その後でキューに追加された処理が実行され背景色がピンクに変わりますが、次の「左に移動するアニメ」は実行されません。

アニメの処理は完了したら自動的に次のキューの処理に進みますが、cssメソッドのようなアニメではない処理は完了してもキューが進まないためです。この問題を解決するのがjQuery.dequeueメソッドなのです。

jQuery.dequeueを利用して次の処理を実行する

ではjQuery.dequeueメソッドを利用して、サンプルjDequeue/01.htmlの問題を解決しましょう。
サンプル(jDequeue/02.html)を開いてbody内の構成はjDequeue/01.htmlと同じ事を確認してください。jQueryもほとんど同じで、異なるのは以下の様にjQuery.queueメソッドで追加した背景色をピンクにする処理の後にjQuery.dequeueメソッドを追加した点だけです。

jQuery.dequeueメソッドの引数にjQueryオブジェクトを設定しているように見えますが、後に[0]と追加することでjQueryオブジェクトから最初のDOM要素を取得しています。要素はjQueryオブジェクトではなく、DOM要素しか利用できません。

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

結果として、サンプルdequeue/01.htmlと異なり、背景色がピンクになった後のアニメが実行されます。
dequeueメソッドであればメソッドチェーンが利用できるので、やはりdequeueメソッドを利用した方がよいでしょう。

関連項目

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