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

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

[山田祥寛(http://www.wings.msn.to/),著]



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

連載目次


 animateメソッドでは、

animate(params [,speed] [,easing] [,fnc])

とは別にもう1つ、

animate(params, options)

という構文を公開しており、アニメーションにかかわるオプション情報を、引数options(ハッシュ形式)でまとめて指定することもできるようになっています。

 引数optionsで指定できるオプションは、以下のとおりです。

オプション 概要
duration アニメーションを実行する時間(ミリ秒、もしくはslow、normal、fast)
easing 変化量(linear、swingのほか、Easingプラグインを導入することでさまざまな変化を表現できる)
complete アニメーション完了時に実行するコールバック関数
step アニメーションのステップごとに実行する関数
queue アニメーションを順に実行するか(true/false)
specialEasing イージング名をプロパティ単位に指定する際に使用
引数optionsで指定できるオプション

 以下は、指定されたアイコン画像を5秒(=5000ミリ秒)かけて600×400にリサイズ、また、半透明にする例です。イージングはlinear、アニメーション完了時にはダイアログ・ボックスを表示するものとします。

<script type="text/javascript">

$(function() {

  $('img').animate({ height: "400px", width: "600px" },
  // オプション情報を設定
  {
    duration: 5000, // アニメーションにかける時間
    easing: "linear", // イージング名
    complete: function() { alert("動作完了"); } // 終了時の処理
  }
  );
});

</script>

  ……中略……

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

リスト117 アニメーションのオプション情報をハッシュ形式で指定(AnimateOpt.html)
このHTMLを実際にブラウザで開く


ブラウザで開く


5秒後


リスト117の実行結果

 そのほかのオプションstep、queue、specialEasingを利用した例については、次項以降で解説します。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

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

メールマガジン登録

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