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

animateメソッド(2)

アニメの長さを設定する

animateメソッドではアニメの長さ（ミリ秒）を設定することができます。ミリ秒の設定はanimateメソッドの第２引数に設定し、属性を設定するobjectオブジェクトとは別なことに注意してください。
サンプル（03/05_01.html）を開いてください。jQueryは前回のサンプル（03/04_05.html）とほとんど同じですが、以下の様にanimateの第２引数にミリ秒が設定してあります。属性を設定している{}とは別なことに気を付けてください。 

function downFunc() {
	$("#animeTarget").animate({top: "200px"}, 1000);
}
function upFunc() {
	$("#animeTarget").animate({top: "0px"}, 50);
}

このサンプルでは青いdiv領域をクリックすると、下にはゆっくりと１秒かけて移動し、上には0.05秒ですぐに移動します。

加速の種類（イージング）を設定する

jQueryでは加速の種類（イージング）を設定することができます。jQueryで利用できる設定はswingとlinearの２種類だけですが、プラグインを追加することで多様なイージングを導入できます。それらについてはプラグインのeasing（未完成のためリンク無し）で紹介する予定です。

イージングの種類
swing：徐々に加速したのち減速して停止します。デフォルトはこちらです。
linear：加速度は0。つまり等速移動します。自然界にあまり無い動きなので少し違和感があります。

２つのイージングの違いをサンプルで確認しましょう。サンプル（03/05_02.html）を開いてください。移動対象のdivを２つに増やし、それぞれidをeasing_swing、easing_linearと設定しました。青いdiv領域をクリックすると同時にアニメが開始されるのでイージングの違いを確認できます。 

function downFunc() {
	$("#easing_swing").animate({top: "200px"}, 1000, "swing");
	$("#easing_linear").animate({top: "200px"}, 1000, "linear");
}
function upFunc() {
	$("#easing_swing").animate({top: "0px"}, 1000, "swing");
	$("#easing_linear").animate({top: "0px"}, 1000, "linear");
}

イージングの設定は上記のようにanimateメソッドの第３引数に設定します。（ダブル）クォートが必要なので忘れないで下さい。イージングを設定しない場合はswingになります。linearはあまり利用しないので、イージングの設定は省略されることが多いでしょう。属性毎にイージングを設定する（X方向はswing,Y方向はlinearなど）ことも可能ですが、それはプラグインのeasing（未完成のためリンク無し）で紹介する予定です。

コールバックの設定

jQueryではアニメが完了したら特定の処理を実行するようにできます。このような処理をコールバックと呼びます。これはイージングよりも重要なので覚えるようにしましょう。

コールバック（call back）
特定の処理が完了したら、それを知らせる処理のこと。jQueryのアニメではfunctionを設定することで、アニメの完了後にそれを実行します。

サンプル（03/05_03.html）を開いてalertFuncが新たに作成されているのを確認して下さい。続いてanimateメソッドを確認すると以下の様に第４引数にalertFuncが設定されています。animateメソッドは第４引数にfunctionを設定することで、アニメが完了後にfunctionを実行することができます。alertFuncではアラートを表示するようにしているので、アニメが完了したらアラートが表示されます。 

function downFunc() {
	$("#animeTarget").animate({top: "200px"}, 1000, "swing", alertFunc);
}
function upFunc() {
	$("#animeTarget").animate({top: "0px"}, 1000, "swing", alertFunc);
}

これでanimateメソッドに設定できる引数の紹介が終わったので以下にまとめておきます。このようにanimateメソッドでは４つの設定ができるのです。 ※animateメソッド(3)では別の構文の説明をします。

animateメソッドの構文
$(セレクタ).animate(属性,期間,イージング,コールバック)
・属性はobjectオブジェクトによって設定します。
・速度はミリ秒で設定します。（ダブル）クォートは必要ありません。
・イージングは"swing"か"linear"しか設定できません。イージングプラグインの追加で種類が増えます。
・コールバックにはfunctionを設定します。設定するだけなので（）を付けないことに注意しましょう

このanimateメソッドの構文では属性以外の引数は省略可能です。ですので、期間やイージングは設定したくないけれどコールバックは設定したい場合は、サンプル（03/05_04.html）のように省略しても構いません。 

function downFunc() {
	$("#animeTarget").animate({top: "200px"}, false, false, alertFunc);
}
function upFunc() {
	$("#animeTarget").animate({top: "0px"}, false, false, alertFunc);
}

jQueryのアニメの特長

スライド処理の項ですこし説明しましたが、jQueryのアニメは完了してからでないと、次のアニメを開始しないようになっています。サンプル（03/05_05.html）を開いて下さい。クリックすると２つのアニメ処理を行います。以下の２行目の処理でＸ座標が300pxの位置に移動し、３行目の処理でＹ座標が300pxの位置に移動します。 

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

Ｘ方向とＹ方向を操作しているのでナナメに移動しそうですが、青いdiv領域をクリックすると最初Ｘ方向に300px移動し、それが完了してからＹ方向にアニメします。この仕様は後で紹介するqueueという仕組みで変更することができますが、まずは以下の様に覚えて下さい。

jQueryのアニメの特長
animateメソッドは１つの命令が完了してから次の命令を実行します。複数のアニメを同時に実行した場合は複数の属性を設定して下さい。

もしナナメに移動させたい場合は２つのanimateメソッドを書くのではなく、１つのanimateメソッドに複数の属性を設定します。サンプル（03/05_06.html）を開いて下さい。以下の様にanimateメソッドは１つにまとめられ、属性の部分でleftとtopの設定するようにしました。 

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

ひとまずanimateメソッドの説明は終わりです。次回はアニメを停止するstopメソッドについて説明します。