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

animateメソッド(1)

要素の属性をアニメさせる

フェード処理は透明度、スライド処理は高さなど操作できる属性が固定されているため、利用範囲が限られます（そのぶん簡単な構文で利用できますが）。それを補うようにjQueryにはanimateメソッドがあり、これは位置や幅などの属性を操作できる非常に汎用性が高いメソッドとなっています。

サンプル（03/04_01.html）を開いてjQueryを確認して下さい。toggleイベントを利用してbigFuncとsmallFuncを交互に実行しています。今回のポイントはbigFuncとsmallFuncで利用されているanimateメソッドです。汎用性が高い分構文が少し複雑です。メソッドなので後ろに（）を伴うのですが、ここにobjectオブジェクトを設定する必要があります。

function bigFunc() {
	$("#animeTarget").animate({width: "300px"});
}
function smallFunc() {
	$("#animeTarget").animate({width: "100px"});
}

サンプル03/04_01.htmlでは（）内に直接objectオブジェクトを設定していますが、あらかじめobjectオブジェクトを作成したサンプル（03/04_02.html）も用意しました。文字量が増えますしobjectオブジェクト名の管理も大変なので、このような書き方はあまりしないと思いますが、animateメソッドが引数にobjectオブジェクトを必要とすることがよく分かると思います。

なぜobjectオブジェクトを利用する必要があるかというと、サンプル（03/04_03.html）のように複数の属性を設定するためです。objectオブジェクトの構造はjavaScriptと同じですが以下に記しておきます。属性には（ダブル）クォートが必要なく、値には（ダブル）クォートが必要なことに気を付けてください。

objectオブジェクトの構文: {属性:値, 属性:値, 属性:値,……}
{}によって囲まれ、属性と値のセットを,（カンマ）によって区切ります。属性と値の間には:（コロン）が必要です。

function bigFunc() {
	$("#animeTarget").animate({width: "300px", height: "300px"});
}
function smallFunc() {
	$("#animeTarget").animate({width: "100px", height: "100px"});
}

操作できる属性

animateメソッドで操作できる属性は、width (幅), height (高さ), left(X座標), top(Y座標), opacity(透明度)など10進数の値で設定できるものに限られます。複数の値を設定するmarginやpaddingなどの他、16進数が必要なcolorなどは利用できません（可能にするプラグインもあるそうなので、いつの日かプラグインのページで紹介したいと思います）。

また属性名に-（ハイフン）が含まれる者はハイフンを外して続く最初の文字を大文字（いわゆるキャメルケースの形）にする必要があります。例えばmargin-topであればmarginTopにしなければなりません。例としてmargin-top(marginTop)を操作しているサンプル（03/04_04.html）を用意したので確認してください。

function bigFunc() {
	$("#animeTarget").animate({marginTop: "100px"});
}
function smallFunc() {
	$("#animeTarget").animate({marginTop: "0px"});
}

移動する場合の注意点

left(X座標)やtop(Y座標)を操作すれば、位置を移動することが可能なのですがcssのpositionを設定しておかないと機能しません。まずは正常に機能するサンプル（03/04_05.html）を開き、移動させる対象であるanimeTargetのcssを確認してください。以下の様にpositionの設定がされています（サンプルではrelativeですが、他の値でも可能です）。このサンプルは青のdiv領域をクリックするとtop属性を操作して、相対座標で200pxと0pxのＹ座標値を行き来します。

#animeTarget{
	position:relative;
	width:100px;
	height:100px;
	background-color:#F90;
}

続いて機能しないサンプル（03/04_06.html）を開いて青いボタンをクリックしても機能しないことを確認してください。ソースを確認するとjQueryには変更はなく、cssの設定からpositionが抜けています。このようにpositionが設定されていないと機能しないので、デフォルトのrelativeを利用する場合でも設定するようにしましょう。

複合代入子の利用

計算結果を同じ変数に代入する+=や-=などの複合代入子もanimateメソッドで利用することが可能です。サンプル（03/04_07.html）を開きanimateメソッドを確認して下さい。javaScript自身の構文とは異なり、以下の様に属性の値の部分に設定します。これで現在の自分がいる位置から相対的に移動することができます（サンプルでは右や左に50px移動します）。

$("#leftButton").click(function(){
	$("#animeTarget").animate({left: "-=50px"});
});
$("#rightButton").click(function(){
	$("#animeTarget").animate({left: "+=50px"});
});

複合代入子: 代入演算子（＝）に算術演算子（+や-など）が追加されたもの。本来は以下の様に左辺と右辺に同じ変数がある数式を短くできる構文。jQueryでは属性に値を代入できないので、上記のようになります。
Ｘ＝Ｘ＋１　→　Ｘ＋＝１

animateメソッドはさらに細かい設定ができるので、次回も引き続きanimateメソッドについて説明します。

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