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

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

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



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

連載目次


 animateメソッドでは、第3引数easingを指定することでアニメーションの変化の度合い(例えば、徐々に速くなる、最初は速く最後はゆっくりと、など)を指定できます。このようなアニメーションの変化の度合いの設定は一般的に「イージング」(easing)と呼ばれます。

 animateメソッドでは、引数easingへの指定値として、標準で、linear、swingのいずれかを指定できます。

 以下に、引数easingを指定した場合の例を示します。swingは、最初は早く、最後はややゆっくりと変化するeasing設定です。

<script type="text/javascript">

$(function() {
  $('img')
    .animate({height:"400px", width:"600px"}, 5000, ★"swing"★);
});

</script>

  ……中略……

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

リスト116 引数easingを指定してアニメーションを実行(AnimateEase.html)
このHTMLを実際にブラウザで開く


ブラウザで開く


5秒後


リスト116の実行結果

 引数easingには、Easingプラグイン(http://plugins.jquery.com/project/Easing)を指定することで、よりさまざまな値を指定できます。以下は、Easingプラグインが提供する「easeInElastic」を適用した例です。

<script src="../jquery-1.4.1.js" type="text/javascript"></script>
<script src="../jquery.easing.1.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function() {
  ('img').animate({ height: "400px", width: "600px" }, 5000, "easeInElastic");
});

</script>

Easingプラグインの「easeInElastic」を利用した場合の記述例

 Easingプラグインで利用できるEasing名には、以下のようなものがあります。具体的な挙動については、実際にこれらの値をサンプルに適用して確認してみてください。

easeInQuad easeOutQuad easeInOutQuad
easeInCubic easeOutCubic easeInOutCubic
easeInQuart easeOutQuart easeInOutQuart
easeInQuint easeOutQuint easeInOutQuint
easeInSine easeOutSine easeInOutSine
easeInExpo easeOutExpo easeInOutExpo
easeInCirc easeOutCirc easeInOutCirc
easeInElastic easeOutElastic easeInOutElastic
easeInBack easeOutBack easeInOutBack
easeInBounce easeOutBounce easeInOutBounce

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

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

メールマガジン登録

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