初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
1章：jQuery入門
2章：jQuery基礎
3章：jQuery発展
番外編：研究

アニメを管理する仕組み

概要

アニメはキュー（配列のような仕組み）で管理される

jQueryではアニメが完了してからでないと次のアニメを開始しないことはすでに説明しました。何故この様な仕様になっているかというと、jQueryではアニメを配列のような仕組みに記憶し、それを順々に実行しているためです。このアニメを記憶している配列のような仕組みをjQueryではキュー(queue)と呼びます。

あまり利用する機能ではないのですが、次回の「汎用的なアニメ(3)」でキューが関係するので紹介しています。

解説

queueメソッド

queueメソッドを利用すると要素に設定されたキューの内容を確認することができます。
サンプル（queue/01.html）のソースを開いてbody内にbutton要素とdiv要素があることを確認してください。

jQueryは以下の様に記述され、queueメソッドは4行目で利用されています。この処理でid属性がanimeTargetの要素に設定されたアニメの情報を取得し変数animeArrayに代入しています。その値は5行目でtextメソッドを利用してid属性がanimeTargetの要素に表示します。 

$("button").click(function(){
	$("#animeTarget").animate({left: "300px"},3000);
	$("#animeTarget").animate({top: "300px"},3000);
	var animeArray = $("#animeTarget").queue();
	$("#animeTarget").text(animeArray);
});

結果として、buttonをクリックするとdiv要素内にキュー（スクリプトのような記述）が表示されます。概要で「配列のような仕組み」と説明したのは、このように通常の配列のようには表示されないためです。

設定されたアニメの数を取得

キューの値は直接利用するのではなく、javaScriptのlengthプロパティを利用してアニメの数を取得するのに利用します。サンプル（queue/01b.html）のソースを開いて、ほとんどqueue/01.htmlと同じ事を確認して下さい。異なるのは以下の様に、queueメソッドで取得したデータ「animeArray」にlengthプロパティを利用している点だけです。 

$("button").click(function(){
	$("#animeTarget").animate({left: "300px"},3000);
	$("#animeTarget").animate({top: "300px"},3000);
	var animeArray = $("#animeTarget").queue();
	$("#animeTarget").text("アニメの数は"+animeArray.length);
});

結果として、buttonをクリックするとdiv要素内に登録されたアニメの数が表示されます。このサンプルでは上記の2行目と3行目で2つのアニメが設定されているため、「アニメの数は2」と表示されます。

完了したアニメはキューから削除されます

完了したアニメはキューから削除されます。サンプル（queue/02.html）のソースを開いて、jQueryの以下の部分を確認して下さい。buttonをクリックすると4つのアニメを実行します。各animateメソッドにはコールバックでalertFuncを実行するようにしています。 

$("button").click(function(){
	$("#animeTarget").animate({left: "300px"},2000,alertFunc);
	$("#animeTarget").animate({top: "300px"},2000,alertFunc);
	$("#animeTarget").animate({left: "0px"},2000,alertFunc);
	$("#animeTarget").animate({top: "0px"},2000,alertFunc);
});

alertFuncは以下の様に記述され、id属性がanimeTargetの要素に設定されたアニメの数を表示します。 

function alertFunc() {
	var animeArray = $("#animeTarget").queue();
	$("#animeTarget").text(animeArray.length);
}

buttonをクリックしてアニメを開始すると、アニメが完了する毎に4→3→2→1と数が減り、登録されたアニメが減ることが確認できます。alertFuncを実行してからアニメがキューから削除されるので、表示される値は実際の登録数よりも1多くなります（そのため最後は0でなく1となります）。

試しにbuttonをクリックするとアニメの数を表示するサンプルを作成しました。サンプル（queue/02b.html）のソースを開いてbody内にbuttonが1つ追加されていることを確認して下さい。jQueryも以下の1行が追加され、id属性がcheckのbuttonをクリックするとalertFuncを実行してアニメの数を表示します。 

$("#check").click(alertFunc);

このサンプルで、アニメが全て完了してからcheckボタンをクリックして下さい。全てのアニメが完了しているのでキューの中はカラとなっており、「0」と表示されます。

キューを空にする

queueメソッドを利用するとstopメソッドとは異なった、アニメの停止方法が可能になります。それは「現在のアニメは最後まで再生するが、残りのアニメはキャンセルする」というものです。サンプル（queue/03.html）のソースを開いて、以下のjQueryを確認してください。

id属性がstopButtonの要素をクリックするとキューに空の配列[ ]を設定するようにしました。つまりキューに記憶されたアニメを全て削除します。 

$("#stopButton").click(function(){
	$("#animeTarget").queue([]);
});

startボタンをクリックしてアニメが終わる前にstopボタンをクリックして下さい。stopメソッドではないので、すぐに停止はしませんが、残りのアニメがキューから消されるので次のアニメを再生しません。アニメが完了後に表示される数値もキューが空なので0と表示されます。

キューの重要度は低いので、なんとなくの理解で良いと思います。ここで説明したのは、次回紹介するanimateメソッドの構文で関連する項目があるからです。