検索
連載

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

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

Share
Tweet
LINE
Hatena



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 jQueryでは、fadeInfadeOutslideUpslideDownメソッドのように、特定のアニメーション効果が定義されたメソッドとは別に、自分でオリジナルのアニメーション効果を定義するための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」を指定

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

Copyright© Digital Advantage Corp. All Rights Reserved.

ページトップに戻る