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

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

.clearQueue( )キューを空にする

構文

キューを空にする返値:jQueryオブジェクト
jQo.clearQueue( [キューの名前] )ver1.4〜

機能

jQueryオブジェクトで指定した要素に設定されたアニメーションのキューを空にします(キューについてはanimateメソッドで説明しています)。第1引数にキューの名前を指定して、特定のキューを操作する事ができます。queueメソッドを利用して空の配列をキューに設定するのと同じ機能になります。

解説

キューを空にする

キューを空にすることで現在実行しているアニメ以外の処理を削除することができます
サンプル(clearQueue/01.html)を開いてbody内の構成にdiv要素とbutton要素が2つ(id属性はclearとstart)あることを確認してください。

jQueryはまず、以下の部分を確認して下さい。startボタンをクリックすると、animateメソッドによってdiv要素のキューに4つのアニメを登録して開始します。

$("button#start").click(function(){
	$("div").animate({left:300}, 3000);
	$("div").animate({top:300}, 3000);
	$("div").animate({left:0}, 3000);
	$("div").animate({top:0}, 3000);
});

次に以下のclearボタンの処理を確認してください。ボタンをクリックするとdiv要素に設定されたアニメのキューを空にします。

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

startボタンをクリックしてアニメを開始して下さい。そして最初のアニメ(右に移動するアニメ)が終わる前にclearボタンをクリックして下さい。アニメは停止しませんが左に着いた時点で停止し、下に移動するアニメは実行されません。これはキューが空になったためです。

メモ

queueメソッドでも同じ事ができます

clearQueueメソッドと同じ処理がqueueメソッドを利用することで可能です。queueメソッドの引数に空の配列を設定することで、同じようにキューを空にできるのです。サンプル(clearQueue/test01.html)を開いてclaerQueueメソッドが以下の様に書き換えられていることを確認して下さい。

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

このサンプルもclearQueue/01.htmlと同じように動作します。