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

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

連載目次

　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を利用した例については、次項以降で解説します。