第7回 エフェクト編：連載：jQuery逆引きリファレンス（14/19 ページ）
jQueryの大きな特徴の1つは簡単なコードで実現可能なさまざまなアニメーションだ。アニメーション用メソッドをまとめた、すぐに役立つ18本を一挙公開。
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" />
このHTMLを実際にブラウザで開く
引数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プラグインで利用できる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.