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

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

連載目次

　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