クロージャ(3)汎用的なアニメ(3)概要animateメソッドの別構文animateメソッドには「汎用的なアニメ(2)」で紹介した構文とは別の構文があります。特徴的なのは以下の様に第2引数にもobjectオブジェクトを設定することです。animateメソッドの構文(2)$(セレクタ).animate(属性のオブジェクト,オプションのオブジェクト)・属性のオブジェクトは構文(1)と同じです。・オプションのオブジェクトでは以下のプロパティが設定できます、順番は決まっていません。・queue:キューの設定(次項で説明します)・step:移動の度に実行する処理(次項で説明します)第2引数の「オプションのオブジェクト」に設定する「queue」と「step」は、この構文でしか利用できないので覚える必要があります。使い方は初心者向けの内容なので、設定できるオプションは基本的なものしか説明していません。)を確認してください。第2引数にもobjectオブジェクトまずは「汎用的なアニメ(2)」で紹介したサンプル(animate2/03.html)を、今回の構文で書き換えたサンプルを紹介します。サンプル(animate3/01.html)のソースを開いてjQueryを確認してください。easing:"swing",complete:alertFunc});});2つのサンプルの違いは上記の様にオプションの設定方法です。animate3/01.htmlでは第2引数にobjectオブジェクトを設定します(オブジェクトなので{}を忘れないで下さい)。機能的には2つとも同じです。complete)は「概要」に記述した構文を確認してください。animate3/01.htmlの構文の方がdurationやcomplete等のプロパティ名を覚えなくてはいけないので面倒ですが、この構文でしか利用できない機能があるため覚える必要があります。前回あまり利用しないキュー(queue)を説明したのは、この構文でキューの設定ができるためです。jQueryのアニメはキューに追加され順々に実行されていきますが、オプションの設定によってキューに追加せず直ちにアニメを実行することができるのです。サンプル(animate3/02.html)を開いて「汎用的なアニメ(2)」で紹介したサンプル(animate2/05.html)のソースと見比べて下さい。以下3行目の部分にオプションのオブジェクトが設定されている部分だけが異なります。"300px"},{queue:false});});このqueueというプロパティにfalseを設定すると、キューには登録せず「直ちにアニメを実行」します。そのため最初に設定した横に移動するアニメの完了を待たずに下に移動するためナナメに移動します。キューに追加せず直ちにアニメを実行したい場合は、この設定を利用して下さい。移動の度に実行する処理この構文ではアニメが開始されてから完了するまで、連続的に処理を実行する設定が可能です。サンプル(animate3/03.html)のソースを開いて以下のjQueryを確認して下さい。第2引数のobjectオブジェクトでstepプロパティにstepFuncが設定されています。stepプロパティに設定されたfunctionはアニメの処理中に連続的に実行されます。textメソッドでid属性がanimeTargetの要素内に表示しています。$("#animeTarget").css("left");$("#animeTarget").text(myX);}結果として、青いdiv要素をクリックするとオレンジ色のdiv要素が移動しながらX座標の値を表示していきます。アニメ中に何か処理したい場合は、この設定を利用して下さい。数値がピッタリ300pxで止まらないのは、移動よりも表示の処理の方が先に実行されているためです(つまり表示してから移動している)。実際にはきちんと300pxで停止しています。2つの構文の使い分けqueueやstepの機能を利用しないのであれば、最初に紹介した構文の方がシンプルに記述できるので、そちらを利用しましょう。queueやstepの機能を利用したい時だけ、今回の構文を利用すればよいと思います。これで2章「jQuery基礎」は完了です。次回からは利用頻度は少ないけれど、知っておいた方がよい知識を学ぶ「jQuery発展」に入ります。イベントが要素間を伝わるイベントフローという仕様について説明します。