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

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



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

連載目次


 「アニメーションにかかわるオプションをハッシュ形式で指定するには?」でも紹介したように、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の実行結果

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

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

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

メールマガジン登録

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