jQuery入門講座使い方-queueについて

queueについて

アニメを管理するキューという仕組み

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

queueメソッドを利用するとキューのなかを確認できます。サンプル（03/08_01.html）を開いてソースを確認してください。animeButtonのdivをクリックするとanimeTargetに対し２つのanimateメソッドが実行されます（下記ソースの2,3行）。そのあとでqueueメソッドを利用しanimeTargetのキューを取得しアラートで表示させます。

このサンプルではlengthを利用してキュー（配列）ではなく、キュー内のアニメの数を表示しました（キューは配列ですから、lengthで要素数が取得できるのです）。では青いdiv領域（animeButton）をクリックしてアラートを確認してください。アニメが２つ登録されたので２と表示されるはずです。

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

ちなみにlengthを使わず、キューの配列をそのままアラートで表示するサンプル（03/08_02.html）も用意しました。青いdiv領域をクリックすると非常にたくさんの文字が表示され、アニメ設定の複雑さが実感できます。

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

キューに記憶されたアニメは完了すると削除されていきます。サンプル（03/08_03.html）を開いてjQueryを確認してください。このサンプルではanimeButtonをクリックすると４つのアニメを登録します。そのアニメの設定にはコールバックの設定がされ、アニメが完了したらalertFuncを実行するようにしています。

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

青いdiv領域をクリックしてアニメを開始すると、アニメが完了する毎にalertFuncが実行されキューの数が表示されます。アニメが完了する毎に数が減ることを確認してください。このような仕組みで順次アニメが再生されるのです。

キューを空にする

このことを踏まえるとstopメソッドとは異なった、アニメの停止方法が可能になります。それは「現在のアニメは最後まで再生するが、残りのアニメはキャンセルする」というものです。サンプル（03/08_04.html）を開いてください。アニメの設定はサンプル03/08_03.htmlと同じですが、stopButtonのdiv領域が追加されています。

このstopButtonがクリックされると、以下の様にanimeTargetのキューに空の配列[ ]を設定するようにしました。つまりキューに記憶されたアニメを削除しています。

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

サンプルでstartのdiv領域をクリックしてアニメを開始してから、stopのdiv領域をクリックして下さい。stopメソッドではないので直ちに停止はしませんが、残りのアニメがキューから消されたので、次のアニメを再生しません。アラートもキューが空なので0と表示されます。

この方法はstopメソッドと合わせて覚えておきましょう。ちなみにstopメソッドで第１引数をtrueにしたときの処理もキューを空にしています。ですから残りのアニメが再生されなかったのです。次回はanimateメソッドの別構文について説明します。この構文を利用するとアニメをキューに登録せず、ただちに開始することができます。

次のページ：animateメソッド(3)