要素の属性をアニメさせる前々回説明したフェードやスライド処理は透明度や高さなど、操作できる属性が固定されているため利用範囲が限られます(そのぶん簡単な構文で利用できますが)。animateメソッドがあり、これは位置や幅などの属性を操作できる非常に汎用性が高いメソッドとなっています。animateメソッドについて説明します。要素の属性をアニメさせるサンプル(animate1/01.html)のソースを開いてjQueryを確認して下さい。hoverメソッドを利用してマウスオーバーでbigFunc、マウスアウトでsmallFuncを実行します。smallFunc);});bigFuncとsmallFuncは以下の様に記述されています(thisはもう大丈夫ですよね?)。2つのfunctionともreadyイベントの仕組みの外に記述されていますが、利用しているのは上記2行目のhoverメソッドです。hoverメソッドはreadyイベントの処理内にあるため、2つのfunctionも実際はreadyイベントのタイミングで利用されるため問題はありません。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オブジェクトを必要とすることがよく分かると思います。{$(this).animate(bigObj);//---objectオブジェクトの設定}複数の属性を操作するなぜobjectオブジェクトを利用する必要があるかというと、複数の属性を設定するためです。objectオブジェクトの構造はjavaScriptと同じですが以下に記しておきます。属性:値,......}{}によって囲まれ、属性と値のセットを,(カンマ)によって区切ります。属性と値の間には:(コロン)が必要です。サンプル(animate1/02.html)のソースを開いてjQueryを確認して下さい。以下の様にobjectオブジェクトで2つの属性(widthとheight)を設定しています。"300px"});}結果として、マウスオーバーすると幅と高さが300pxになるアニメが実行されます。opacity(透明度)など10進数の値で設定できるものに限られます。複数の値を設定するmarginやpaddingなどの他、16進数が必要なcolorなどは利用できません(可能にするプラグインもあるそうなので、いつの日かプラグインのページで紹介したいと思います)。属性名に-(ハイフン)が含まれる場合はハイフンを外して続く最初の文字を大文字(いわゆるキャメルケースの形)にする必要があります。margin-topであればmarginTopにしなければなりません。例としてmargin-top(marginTop)を操作しているサンプル(animate1/03.html)を用意したので確認してください。ソースを開いてdiv要素が2つに増えていることを確認してください。上のdiv要素(id属性touchArea)にマウスが重なったら下のdiv要素を操作するようにします。me!</div><div></div>jQueryでは、まず以下の部分を確認してください。hoverメソッドを利用するのはanimate1/01.htmlと同じですが、div要素が2つあるのでセレクタにはid属性touchAreaを利用するようにしました。smallFunc);});bigFuncとsmallFuncは以下の様に記述されています。nextメソッドを利用しています。今回のポイントは属性名です。animateメソッドで利用する場合は以下の様に書き換えないといけません。"0px"});}では実際に青いdiv要素にマウスオーバー/マウスアウトして、上マージンが100pxや0pxに変化してアニメする事を確認してください。識別子について前項のサンプルでハイフンを残したサンプルを作成しました。サンプル(animate1/03b.html)を開いて以下の様に属性名が変更されていることを確認してください。"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の位置に移動し、マウスアウトすると元に戻ります。"0px"});}最後にcssのposition設定を省略すると、本当に機能しないのかを確認します。サンプル(animate1/04b.html)を開いて、div要素のcss設定からpositionの設定が削除されていることを確認してください。結果として青いdiv要素にマウスオーバーしても機能しません。アニメでtopやleftを利用する時は、移動させる要素のcssにpositionの設定をする事を忘れないでください。相対的な操作(複合代入子の利用)相対的に値を変化させる「+=」や「-=」などの複合代入子もanimateメソッドで利用できます。サンプル(animate1/05.html)のソースを開きanimateメソッドを確認して下さい。javaScriptの構文とは異なり、以下の様に属性の値の部分に設定します。これで現在の自分がいる位置から相対的に移動することができます(サンプルでは右や左に50px移動します)。文字列なのでクォートが必要なのを忘れないで下さい。"+=50px"});});結果として、leftボタンをクリックする毎にdiv要素が左に50px移動し、rightボタンをクリックする毎に右に50px移動します。(=)に算術演算子(+や-など)が追加されたもの。本来は以下の様に左辺と右辺に同じ変数がある数式を短くできる構文。jQueryでは属性に値を代入できないので、上記のように属性の値として設定します。丁寧な記述ではアニメさせるプロパティに「px」と単位を付けますが、これを省略して数値を設定することもできます。サンプル(animate1/test01.html)を開いて、ほとんどanimate1/01.htmlと同じ事を確認して下さい。異なるのは以下の様に値に数値が利用されている点です(数値なのでダブルクォートは必要ありません)。{$(this).animate({width:100});}属性の単位には「px」の他に「%」も利用することもできます。数値だけだと「px」か「%」かの区別が付きませんので、pxを付ける方が丁寧な表現というわけです。単位の%についてはリファレンスのanimateメソッドのメモ「属性の値に%を利用する時の注意」で少し説明しています。animateメソッドはさらに細かい設定ができるので、次回も引き続きanimateメソッドについて説明します。次回のサンプルでも丁寧に「px」を付けています。