jQuery入門講座使い方-汎用的なアニメ(1)

汎用的なアニメ(1)

概要

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

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

解説

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

サンプル（animate1/01.html）のソースを開いてjQueryを確認して下さい。「初歩的なサンプル」で紹介したhoverメソッドを利用してマウスオーバーでbigFunc、マウスアウトでsmallFuncを実行します。

$(function () {	
	$("div").hover(bigFunc, smallFunc);			
});

bigFuncとsmallFuncは以下の様に記述されています（thisはもう大丈夫ですよね？）。
2つのfunctionともreadyイベントの仕組みの外に記述されていますが、利用しているのは上記2行目のhoverメソッドです。hoverメソッドはreadyイベントの処理内にあるため、2つのfunctionも実際はreadyイベントのタイミングで利用されるため問題はありません。

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

今回のポイントはbigFuncとsmallFuncで利用されているanimateメソッドです。汎用性が高い分、構文が少し複雑です。メソッドなので後ろに（）を伴うのですが、ここにobjectオブジェクトで操作したい属性（サンプルではwidth）と値（サンプルでは300pxや100px）を設定する必要があります。

animateメソッドの構文（仮）: $(セレクタ).animate(属性のオブジェクト)
※引数にはアニメさせたい属性をobjectオブジェクトで設定します。
※構文には続きがあるのですが、それは次回で説明します。なのでタイトルに（仮）がついています。

サンプルではbigFuncとsmallFuncで要素の幅（width）を300pxにしたり100pxにしているので、div要素にマウスオーバーすると幅が伸び、マウスアウトで元に戻ります。属性（サンプルではwidth）にはクォートが必要ありませんが、値にはpx付きの文字列を設定しているのでクォートが必要となります。

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

//---objectオブジェクトの作成
bigObj = new Object();
bigObj.width = "300px";
function bigFunc() {
	$(this).animate(bigObj);//---objectオブジェクトの設定
}

複数の属性を操作する

なぜobjectオブジェクトを利用する必要があるかというと、複数の属性を設定するためです。objectオブジェクトの構造はjavaScriptと同じですが以下に記しておきます。

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

サンプル（animate1/02.html）のソースを開いてjQueryを確認して下さい。以下の様にobjectオブジェクトで2つの属性（widthとheight）を設定しています。

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

結果として、マウスオーバーすると幅と高さが300pxになるアニメが実行されます。

操作できる属性

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

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

ソースを開いてdiv要素が2つに増えていることを確認してください。上のdiv要素（id属性touchArea）にマウスが重なったら下のdiv要素を操作するようにします。

<div id="touchArea">touch me!</div>
<div></div>

jQueryでは、まず以下の部分を確認してください。hoverメソッドを利用するのはanimate1/01.htmlと同じですが、div要素が2つあるのでセレクタにはid属性touchAreaを利用するようにしました。

$(function () {	
	$("#touchArea").hover(bigFunc, smallFunc);			
});

bigFuncとsmallFuncは以下の様に記述されています。イベントが発生した場所と操作する対象が異なるので前回利用したトラバースのnextメソッドを利用しています。そして今回のポイントは属性名です。cssでは上マージンの属性名はmargin-topですが、animateメソッドで利用する場合は以下の様に書き換えないといけません。

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

では実際に青いdiv要素にマウスオーバー/マウスアウトして、上マージンが100pxや0pxに変化してアニメする事を確認してください。

識別子について

前項のサンプルでハイフンを残したサンプルを作成しました。サンプル（animate1/03b.html）を開いて以下の様に属性名が変更されていることを確認してください。

function bigFunc() {
	$(this).next().animate({margin-top: "100px"});
}
function smallFunc() {
	$(this).next().animate({margin-top: "0px"});
}

属性の名前にはハイフンは利用できないため（javaScriptエラーになります）、青いdiv要素にマウスオーバーしても機能しません。

ここで「識別子」について説明しておきます。識別子とはjQueryの用語ではなくjavaScriptを初めほとんどのスクリプト言語で共通の仕組みです。識別子とは自他を区別する名前のことです。変数名なども他の変数と区別できるように名前を付けるので識別子です。識別子は以下のルールに従って命名する必要があります。

識別子のルール

変数やfunction名、属性名は他と区別（識別）できるように以下のルールに従う必要があります。
他と区別するための名前を識別子と呼びます。

ほかと同じ名前ではいけない（既存のメソッド名などと同じなのもダメ）
利用できる文字は半角英数と_（アンダースコア）と$のみ。-（ハイフン）は利用できません
数字から始まる名前はダメ

javaScriptで利用する属性名も識別子なので、上記のルールに従いハイフンは利用できないのです。

移動する場合の注意点

前項のようにマージンを操作すれば要素を移動させることができますが、属性のleft(X座標)やtop(Y座標)を利用する方が一般的でしょう。ただし、その場合の注意点としてcssのpositionをstatic以外に設定しておかないと機能しません（デフォルトはstaticのため、positionの設定を省略すると機能しません）。

まずは正常に機能するサンプル（animate1/04.html）を開き、移動させるdiv要素のcssを確認してください。以下の様にpositionの設定がされています。

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

jQueryはanimate1/03.htmlとほとんど同じですが、属性にmarginTopではなくleftを利用しています。結果として青いdiv要素にマウスオーバーすると左から200pxの位置に移動し、マウスアウトすると元に戻ります。

function rightFunc() {
	$(this).next().animate({left: "200px"});
}
function leftFunc() {
	$(this).next().animate({left: "0px"});
}

最後にcssのposition設定を省略すると、本当に機能しないのかを確認します。
サンプル（animate1/04b.html）を開いて、div要素のcss設定からpositionの設定が削除されていることを確認してください。結果として青いdiv要素にマウスオーバーしても機能しません。アニメでtopやleftを利用する時は、移動させる要素のcssにpositionの設定をする事を忘れないでください。

相対的な操作（複合代入子の利用）

相対的に値を変化させる「+=」や「-=」などの複合代入子もanimateメソッドで利用できます。
サンプル（animate1/05.html）のソースを開きanimateメソッドを確認して下さい。javaScriptの構文とは異なり、以下の様に属性の値の部分に設定します。これで現在の自分がいる位置から相対的に移動することができます（サンプルでは右や左に50px移動します）。文字列なのでクォートが必要なのを忘れないで下さい。

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

結果として、leftボタンをクリックする毎にdiv要素が左に50px移動し、rightボタンをクリックする毎に右に50px移動します。このテクニックは良く利用すると思うので覚えるようにしましょう。

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

メモ

プロパティの値に数値を利用

丁寧な記述ではアニメさせるプロパティに「px」と単位を付けますが、これを省略して数値を設定することもできます。サンプル（animate1/test01.html）を開いて、ほとんどanimate1/01.htmlと同じ事を確認して下さい。

異なるのは以下の様に値に数値が利用されている点です（数値なのでダブルクォートは必要ありません）。

function bigFunc() {
	$(this).animate({width:300});
}
function smallFunc() {
	$(this).animate({width:100});
}

属性の単位には「px」の他に「%」も利用することもできます。ですから数値だけだと「px」か「%」かの区別が付きませんので、pxを付ける方が丁寧な表現というわけです。単位の%についてはリファレンスのanimateメソッドのメモ「属性の値に%を利用する時の注意」で少し説明しています。

animateメソッドはさらに細かい設定ができるので、次回も引き続きanimateメソッドについて説明します。次回のサンプルでも丁寧に「px」を付けています。

次のページ：汎用的なアニメ(2)