第7回 エフェクト編：連載：jQuery逆引きリファレンス（12/19 ページ）

jQueryの大きな特徴の1つは簡単なコードで実現可能なさまざまなアニメーションだ。アニメーション用メソッドをまとめた、すぐに役立つ18本を一挙公開。

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　jQueryでは、fadeIn／fadeOut、slideUp／slideDownメソッドのように、特定のアニメーション効果が定義されたメソッドとは別に、自分でオリジナルのアニメーション効果を定義するためのanimateメソッドが用意されています。

　animateメソッドで指定できる引数は、以下のとおりです。

引数	概要
params	アニメーション完了後の状態（「スタイル名: 値」のハッシュ形式）
speed	アニメーションを実行する時間（ミリ秒、もしくはslow、normal、fast）
easing	イージング名（詳細は項「アニメーションの変化の程度を調整するには？」を参照）
fnc	アニメーション完了時に実行するコールバック関数
animateメソッドの引数

　引数paramsに指定できるスタイル・プロパティは、値として数値を受け取るプロパティに限られます（つまり、background-colorのようなプロパティは指定できません）。単位には「px」「%」「em」などを利用でき、省略された場合にはpx（ピクセル）と見なされます。

　それではさっそく、具体的な例を見てみましょう。以下は、指定されたアイコン画像を5秒（＝5000ミリ秒）かけて600×400にリサイズ、また、半透明にする例です。

<script type="text/javascript">

$(function() {
  $('img').animate({height:"400px", width:"600px", opacity:0.5}, 5000);
});

</script>

  ……中略……

<img src="http://www.wings.msn.to/books/978-4-7981-1957-1/978-4-7981-1957-1_logo.jpg" alt="ASP.NET" />

リスト114 アイコン画像を5秒かけて、リサイズ＋半透明化（Animate.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

5秒後

リスト114の実行結果

　スタイル・プロパティには絶対値の代わりに、「+=num」「-=num」の形式で増減値を指定することもできます。例えば、以下のように指定します。

$('img').animate({ height: "+=100px", width: "+=150px" }, 5000);

スタイル・プロパティに「+=num」「-=num」の形式で増減値を指定

　この場合、現在の画像サイズが30×80ピクセルであれば、最終的に130×230ピクセルになるようにリサイズによるアニメーションが行われます。

　さらに、hide、show、toggleのような予約値を指定することもできます。例えば、以下のように使います。

$('img').animate({ width: "toggle", opacity: "toggle" }, 5000);

スタイル・プロパティに予約値である「toggle」を指定

　この場合、現在、画像が表示状態であれば幅を狭め、透明化する方向で画像を非表示にし、非表示状態であれば幅を広げ、半透明化する方向に画像を表示します。いわゆる表示／非表示を交互に切り替えるトグルの動作となります。