jQuery入門講座使い方-animateメソッド(3)

animateメソッド(3)

animateメソッドの別構文

animateメソッドには以前紹介した構文とは別の構文があります。以下の様に第１引数の属性の設定は変わりないのですが、第２引数にもオブジェクトを指定する方法です。まずは以前の構文を、新しい構文で書き換えたサンプル（03/09_01.html）を用意したので開いて下さい。

animateメソッドの構文(2): $(セレクタ).animate(属性のオブジェクト,オプションのオブジェクト)
・属性のオブジェクトは構文(1)と同じです。
・オプションのオブジェクトでは以下のプロパティが設定できます、順番は決まっていません。
　・duration：アニメの長さ（速度）
　・easing：イージングの設定
　・callback：コールバックの設定
　・queue：キューの設定（次項で説明します）
　・step：移動の度に実行する処理（次々項で説明します）

２つのdivを以前の構文と、新しい構文で移動させています。以下のソースで6行目が新しい構文です。オブジェクトなので｛｝で囲まれ、プロパティ名と値のセットが設定されています。

$("#animeButton_1").click(function () {
 $("#animeTarget_1").animate({left:"200px"},3000,"linear",alertFunc);
});	
	
$("#animeButton_2").click(function () {
 $("#animeTarget_2").animate({left:"200px"},{duration:3000,easing:"linear",complete:alertFunc});
});

オブジェクトであることが分かりやすいように、あらかじめオブジェクトを作成したサンプル（03/09_02.html）も用意したので確認しておいて下さい。

この構文はオブジェクトを設定するため、文字を書く量が多くなってしまうのですが、以下に説明するように以前の構文では利用できない設定が可能となります。

キューに登録せず直ちにアニメを実行

この構文をキューの説明の後にしたのは、キューに関する設定ができるためです。jQueryのアニメの演出は通常、キューという配列に記憶され順々に実行されていきますが、オプションの設定によってキューに追加せず直ちにアニメを実行することができるのです。

サンプル（03/09_03.html）を開いて下さい。animateメソッド(2)で紹介したサンプル（03/05_05.html）とソースを見比べて下さい。以下の様に２つめのanimateメソッドにオプションのオブジェクトが設定されている部分だけが異なります。

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

このqueueというプロパティをfalseに設定すると、キューには登録せず直ちにそのアニメを実行します。そのため最初に設定した横に移動するアニメの官僚を待たずに下に移動します。結果として同時にアニメが実行されナナメに移動します。また、この構文は必要のないプロパティの設定は省略できます。サンプル03/09_03.htmlでもdurationやeasingなど設定は省略されています。

移動の度に実行する処理

さらにアニメが開始されてから完了するまで連続的に処理を実行する設定が可能です。分かりにくいのでサンプルで確認しましょう。サンプル（03/09_04.html）を開いて下さい。

まず以下のソース8行目のanimateメソッドを確認してください。オプションのオブジェクトにstepというプロパティがあり、値にstepFuncが設定されています。このstepFuncはfunctionで以下ソースの1〜4 行目で設定され、cssメソッドでdiv(animeTarget)のleft属性の値を取得（2行目）し、textメソッドでdiv内に表示（3行目）するようにしています。

function stepFunc() {
	var myX = $("#animeTarget").css("left");
	$("#animeTarget").text(myX);	
}
	
$(function () {
 $("#animeButton").click(function(){
　$("#animeTarget").animate({left: "300px"},{duration:3000,step:stepFunc});
 });			
});

青いdiv領域をクリックすると、animeTargetのdivが移動しながらleftの値を表示しているのが確認できます（たまに299pxで表示が止まってしまう場合がある...）。

２つの構文の使い分けですが、複雑な設定は必要なく属性の設定と長さだけの場合は最初の構文の方がシンプルに記述できます。キューやステップの設定が必要な場合は今回の構文を利用しましょう。これでメインの使い方は終了です。4章として上級アラカルトがありますが、これは利用する頻度が少ないので、軽く目を通し必要なときに確認すればよいでしょう。その後はサンプルの（未完成のためリンク無し）ページに進みコンテンツの作成を通してjQueryを学ぶようにしましょう。

次のページ：4章 jQueryの高速化