第7回 エフェクト編：連載：jQuery逆引きリファレンス（12/19 ページ）
jQueryの大きな特徴の1つは簡単なコードで実現可能なさまざまなアニメーションだ。アニメーション用メソッドをまとめた、すぐに役立つ18本を一挙公開。
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" />
このHTMLを実際にブラウザで開く
スタイル・プロパティには絶対値の代わりに、「+=num」「-=num」の形式で増減値を指定することもできます。例えば、以下のように指定します。
$('img').animate({ height: "+=100px", width: "+=150px" }, 5000);
この場合、現在の画像サイズが30×80ピクセルであれば、最終的に130×230ピクセルになるようにリサイズによるアニメーションが行われます。
さらに、hide、show、toggleのような予約値を指定することもできます。例えば、以下のように使います。
$('img').animate({ width: "toggle", opacity: "toggle" }, 5000);
この場合、現在、画像が表示状態であれば幅を狭め、透明化する方向で画像を非表示にし、非表示状態であれば幅を広げ、半透明化する方向に画像を表示します。いわゆる表示／非表示を交互に切り替えるトグルの動作となります。
Copyright© Digital Advantage Corp. All Rights Reserved.