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

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

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

連載目次

　「アニメーションにかかわるオプションをハッシュ形式で指定するには？」でも紹介したように、easingキーを指定することで、アニメーションの変化量を設定できます。しかし、状況によっては、アニメーション全体ではなく、アニメーションを構成する各スタイル・プロパティに対して個別に変化量を設定したいということもあるでしょう。

　そのようなときのために、jQuery 1.4では「specialEasing」というキーが追加されました。specialEasingキーでは「スタイル・プロパティ名: イージング名」の形式により、スタイル・プロパティの単位で変化量を設定できます。

　以下のサンプルは、widthプロパティに対してeaseInElasticを、heightプロパティに対してeaseOutExpoを、それぞれ設定する例です。なお、この例を実行するには、あらかじめEasingプラグインを組み込んでおく必要があります。Easingプラグインについては、「アニメーションの変化の程度を調整するには？」も併せて参照してください。

<script type="text/javascript">

$(function() {
  $('img')
    .animate({ height: "400px", width: "600px", opacity:0.5 },
    {
      duration: 3000,
      // スタイル・プロパティ個々にイージングを設定
      specialEasing: {
        width: 'easeInElastic',
        height: 'easeOutExpo'
      }
    }
  );
});

</script>

  ……中略……

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

リスト120 width、heightプロパティそれぞれにイージングを設定（AnimateSpecial.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

3秒後

リスト120の実行結果

　幅と高さとが、それぞれ別々の変化をすることが確認できると思います。