.animate()

.animate() メソッドは、任意の数値CSSプロパティでアニメーション効果を作成することを可能にします。 唯一の必須パラメータは、CSSプロパティのマップです。 プロパティの範囲がより限定的であることを除いて、このマップは、.css() メソッドに送信することができるものと同じです。

アニメーションのプロパティと値

以下に記載されている以外の全てのアニメ化するプロパティは、1つの数値にアニメーションしなければなりません; 非数値であるほとんどのプロパティは、基本的なjQuery 関数を使用してアニメーション化することはできません （例えば、width、height、または left はアニメ化できますが、background-color は、 jQuery.Color() を使用しない限りできません）。 プロパティ値は、他の指定をしない限り、ピクセル数として扱われます。指定できる単位は、em と % です。

style プロパティに加えて、scrollTop や scrollLeft のような非 style プロパティやカスタム・プロパティなどもアニメ化することができます。

ショートハンドCSSプロパティ（例えば、margin、background、border）は、サポートされません。 例えば、表示されているマージンを取得する場合は、次のものを使用してください: $(elem).css('marginTop') および $(elem).css('marginRight')、など。

数値に加えて、各プロパティには、文字列 'show'、'hide'、および code>'toggle' を指定することができます。 これらのショートカットにより、要素の表示タイプを考慮するカスタムの非表示および表示アニメーションが可能になります。

アニメーション・プロパティは、相対化することができます。 値の先頭に、文字シーケンス += または -= 付いている場合は、ターゲット値はプロパティの現在値から指定された数を加算または減算することによって計算されます。

注:.slideDown() および .fadeIn() のようなショートハンド・アニメーション・メソッドとは異なり、 .animate() メソッドは、非表示要素をエフェクトの一部として表示するようなことはしません 。 例えば、 $('someElement').hide().animate({height:'20px'}, 500), は、アニメーションが実行されますが、要素は非表示のままです。

持続時間

持続時間(duration)は、ミリ秒で指定します。大きい値は、アニメーションが高速ではなく、低速であることを表します。 文字列の 'fast' と 'slow' はそれぞれ、持続時間が 200 および 600 ミリ秒を設定するために使用することができます。

完全な関数

指定した場合、アニメーションが完了すると、完全なコールバック関数が起動されます。 これは、順に異なるアニメーションをつなぎ合わせるのに役立ちます。 コールバックは、引数を送信しませんが、this はアニメ化されているDOM要素に設定されています。 複数の要素がアニメ化されていれば、コールバックは、全体のアニメーションに一度でなく、マッチした要素毎に一回実行されます。

基本的な使用法

簡単な画像要素をアニメーション化します

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
  style="position: relative; left: 10px;" />

画像の opacity、left オフセット、height を同時にアニメ化します:

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

height プロパティの target 値が 'toggle' であることに注意してください。 画像は始め表示されてるので、アニメーションでそれを非表示にするため、高さを 0 に縮小します。2回目のクリックでは、この遷移を逆にします:

画像の opacity は、すでにその目標値に達しているので、2度目のクリックでは、このプロパティはニメーション化されません。 left の目標値は相対値であるため、画像はこの2度目のアニメーション中でも、さらに右に移動します。

方向プロパティ (top、right、bottom、left) は、position スタイルプロパティがデフォルトの static であれば、 要素への認識可能な効果はでません。

注: jQuery UI プロジェクトは、color のようないくつかの非数字のスタイルをアニメーション化することを可能にすることにより、.animate() メソッドを拡張しています。 プロジェクトには、さらに個々の属性よりも、CSSのクラスを介してアニメーションを指定するためのメカニズムが含まれています。

注: オーバーフローが原因で、要素のコンテンツが表示されている 0px の高さまたは幅を持った要素をアニメーション化しようとする場合、 jQuery は、アニメーション中にこのオーバーフローを切り取るでしょう。 しかし、表示されていない元の要素の寸法を固定することにより、アニメーションがスムーズに実行されることを確認することが可能です。 clearfix は、手動で設定するのではなく、自動的に主要素の寸法を修正するのに使用することができます。

Step 関数

.animate() の第2のバージョンは、step オプション（アニメーションの各ステップで始動されるコールバック関数）を提供します。 この機能は、カスタムアニメーションタイプを有効にするか、または発生中のアニメーションを変更する場合に便利です。 2つの引数（now、fx）を取り、this は、アニメーション化されているDOM要素に設定されています。

• now: 各ステップでアニメーション化するプロパティの数値
• fx: アニメ化された要素の elem 、アニメ化されたプロパティのそれぞれ最初と最後の値の start と end、アニメ化されたプロパティの prop のようなプロパティ数が含まれる、jQuery.fx プロトタイプ・オブジェクトの参照。

step 関数は、各アニメーション要素の各アニメーションプロパティに対して呼ばれることに注意してください。 たとえば、2つの list 項目が与えられた場合、step 関数は、アニメーションの各ステップで 4回 始動します:

$('li').animate({
  opacity: .5,
  height: '50%'
},
{
  step: function(now, fx) {
    var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
    $('body').append('<div>' + data + '</div>');
  }
});

イージング

.animate() の残りのパラメータは、使用するイージング関数名を表す文字列です。 イージング関数は、アニメーションがアニメーション内の異なるポイントへ進行する速度を指定します。 jQuery ライブラリ唯一のイージングの実装は、デフォルトで swing と呼ばれ、linear と言う一定の速度で進行するものです。プラグイン、特に jQuery UI スイート 利用することで多くのイージング関数を使用することができます

プロパティごとのイージング

jQuery バージョン 1.4 時点では、1回の .animate() 呼出し内でプロパティごとのイージング関数を設定することができます。 .animate() の最初のバージョンでは、各プロパティの値として配列にすることができます: 配列の最初のメンバは CSSプロパティで、2番目のメンバはイージング関数です。プロパティごとのイージング関数が、特定のプロパティに対して定義されていない場合、 .animate() メソッドのオプション・イージング引数の値を使用します。イージングの引数が定義されていない場合は、デフォルトの swing 関数が使用されます。

例えば、幅と高さを swing のイージング関数でアニメーション化し、同時に、linear イージング関数で不透明にする場合には:

$('#clickme').click(function() {
  $('#book').animate({
    width: ['toggle', 'swing'],
    height: ['toggle', 'swing'],
    opacity: 'toggle'
  }, 5000, 'linear', function() {
      $(this).after('<div>Animation complete.</div>');
  });
});

.animate() の第2バージョンでは、オプションのマップは、CSS プロパティとそれに対応するイージング関数のマップである specialEasing プロパティを含めることができます。 例えば、linear イージング関数を使用して幅をアニメーション化し、同時に easeOutBounce イージング関数を使用して高さをアニメーション化する場合には:

$('#clickme').click(function() {
  $('#book').animate({
    width: 'toggle',
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });
});

前述したように、easeOutBounce 関数にはプラグインが必要となります。

• 効率的に継続時間を 0 にする jQuery.fx.off = true を設定することで、.animate() を含む全てのjQuery効果をグローバルにオフにすることができます。詳しくは、jQuery.fx.offを参照してください。
• requestAnimationFrame()の特質上、setInterval や setTimeout ループを使用して、アニメーションをキューイングしてはいけません。 CPU 資源を守るために、ウィンドウ/タブが表示されない時には、requestAnimationFrame をサポートするブラウザはアニメーションを更新しません。アニメーションを一時停止しているときに、setInterval や setTimeout を通してアニメーションのキューを続行する場合、ウィンドウ/タブがフォーカスを再取得したときにキューに入っているアニメーションのすべての再生が開始されます。 この潜在的な問題を回避するために、ループの最後のアニメーションにコールバックを使用するか、次のアニメーションを開始するためにタイムアウトを設定する、要素 .queue() に関数を付加します。