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

» 2010年05月21日 00時00分 公開



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

連載目次


 引数paramsでスタイル・プロパティが複数指定された場合、animateメソッドはそれぞれのスタイルを並行して変化させていきます。例えば、「独自のアニメーション効果を適用するには?」では、height(高さ)、width(幅)、opacity(透明度)を同時に変化させる例を紹介しています。

 それでは、これをheight(高さ)/width(幅)→opacity(透明度)と順に変化させるには、どのようにしたらよいのでしょうか。これには、animateメソッドを順に呼び出すだけです。

 具体的な例も見てみましょう。以下は、指定されたアイコン画像をそれぞれ3秒(=3000ミリ秒)かけて、600×400にリサイズ→半透明と変化させていく例です。

<script type="text/javascript">

$(function() {

  $('img')
    .animate({ height: "400px", width:"600px" }, 3000) // リサイズ
    .animate({ opacity:0.5 }, 3000); // 半透明に
});

</script>

  ……中略……

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

リスト115 3秒ずつかけて、600×400にリサイズ→半透明と変化(Animate2.html)
このHTMLを実際にブラウザで開く


ブラウザで開く


3秒間でリサイズ



3秒間で半透明化


リスト115の実行結果

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。