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

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

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

構文

次のキュー処理を実行返値:jQueryオブジェクト
jQo.dequeue( [キューの名前] )ver1.2〜

機能

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

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

v1.4ではqueueメソッドのfunction内でnextメソッドを利用することで同じ事ができます。
→リファレンス:.queue() - v1.4から追加された機能

解説

dequeueを利用しないと...

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

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

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

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

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

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

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

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

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

結果として、サンプルdequeue/01.htmlと異なり、背景色がピンクになった後のアニメが実行されます。

メソッドチェーンを利用したサンプルも紹介しておきます。サンプル(dequeue/02b.html)では以下の様にcssメソッドにメソッドチェーンでdequeueメソッドを連結しています。

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

メモ

キューの中の処理を削除するわけではありません

dequeueメソッドをアニメの途中で実行すると、現在のアニメは削除することなく次のアニメを開始します。
サンプル(dequeue/test01.html)を開いてbody内の構成を確認してください。div要素と2つのbutton要素があります(id属性はstartとdequeue)。

jQueryではdiv要素に4つのアニメが設定され、id属性がdequeueのbuttonをクリックすると以下の様にdequeueメソッドを実行するようになっています。

$("button#dequeue").click(function(){
	$("div").dequeue();
});

これでアニメの最中にdequeueボタンをクリックして下さい。現在のアニメの終了を待たず次のアニメが開始されるためナナメに移動します。しかしキューの中で複数の処理が実行されることになり、予想した動きをさせることは難しく実用的ではないようです。