クロージャ(3)アニメを管理する仕組み概要アニメはキュー(配列のような仕組み)で管理されるjQueryではアニメが完了してからでないと次のアニメを開始しないことはすでに説明しました。この様な仕様になっているかというと、jQueryではアニメを配列のような仕組みに記憶し、それを順々に実行しているためです。このアニメを記憶している配列のような仕組みをjQueryではキュー(queue)と呼びます。利用する機能ではないのですが、次回の「汎用的なアニメ(3)」でキューが関係するので紹介しています。解説queueメソッドqueueメソッドを利用すると要素に設定されたキューの内容を確認することができます。サンプル(queue/01.html)のソースを開いてbody内にbutton要素とdiv要素があることを確認してください。queueメソッドは4行目で利用されています。この処理でid属性がanimeTargetの要素に設定されたアニメの情報を取得し変数animeArrayに代入しています。textメソッドを利用してid属性がanimeTargetの要素に表示します。$("#animeTarget").queue();$("#animeTarget").text(animeArray);});結果として、buttonをクリックするとdiv要素内にキュー(スクリプトのような記述)が表示されます。概要で「配列のような仕組み」と説明したのは、このように通常の配列のようには表示されないためです。設定されたアニメの数を取得キューの値は直接利用するのではなく、javaScriptのlengthプロパティを利用してアニメの数を取得するのに利用します。サンプル(queue/01b.html)のソースを開いて、ほとんどqueue/01.htmlと同じ事を確認して下さい。queueメソッドで取得したデータ「animeArray」にlengthプロパティを利用している点だけです。$("#animeTarget").queue();$("#animeTarget").text("アニメの数は"+animeArray.length);});結果として、buttonをクリックするとdiv要素内に登録されたアニメの数が表示されます。このサンプルでは上記の2行目と3行目で2つのアニメが設定されているため、「アニメの数は2」と表示されます。完了したアニメはキューから削除されます完了したアニメはキューから削除されます。サンプル(queue/02.html)のソースを開いて、jQueryの以下の部分を確認して下さい。buttonをクリックすると4つのアニメを実行します。animateメソッドにはコールバックでalertFuncを実行するようにしています。"0px"},2000,alertFunc);});alertFuncは以下の様に記述され、id属性がanimeTargetの要素に設定されたアニメの数を表示します。$("#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を確認してください。]を設定するようにしました。キューに記憶されたアニメを全て削除します。$("#stopButton").click(function(){$("#animeTarget").queue([]);});startボタンをクリックしてアニメが終わる前にstopボタンをクリックして下さい。stopメソッドではないので、すぐに停止はしませんが、残りのアニメがキューから消されるので次のアニメを再生しません。アニメが完了後に表示される数値もキューが空なので0と表示されます。キューの重要度は低いので、なんとなくの理解で良いと思います。ここで説明したのは、次回紹介するanimateメソッドの構文で関連する項目があるからです。