jQuery日本語リファレンス

前述の指定では第二引数以降で指定していたものを、ハッシュにして第二引数で選択的に渡すことが可能になりました。

第三引数以降を用いたものでは、例えば終了時点の関数のみを指定したくても、全ての引数にデフォルトの値を明示的に指定してやらないといけません。そういった煩わしさを無くすため、連想配列で指定できるようになっています。

指定できるオプションは、以下の通りです。

duration

アニメーションの動作期間を指定します。”slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定します。例えば”1500”であれば、1.5秒かけてアニメーションが行われます。
初期値は”normal”です。

easing

値の変化量を調節するカスタム関数の名前を渡します(参考)。ここに独自の関数を指定することで「徐々に速くなる」「最後にゆっくりになる」「上下しつつ進む」などの変化に富んだ効果を得ることが出来ます。
独自に作成したり、プラグインを入れなくても使える値は”linear”と”swing”だけです。
初期値は”swing”です。

complete

各要素のアニメーションが終わった際に実行される関数を指定します。

step

アニメーション実行中のフレーム毎に呼び出される関数を指定します。
現在の値から着地点になる値が増えている場合は0から1、減っていく場合は1から0の値が第一引数に渡されてきます。例えば引数に0.5が来れば、全体のちょうど半分が実行されたタイミングであることを示します。
関数が何回、どのようなタイミングで呼ばれるかはCPUによりますので、常に不定です。

queue

ここにfalseを指定すると、アニメーションはキューに保存されずに、ただちに実行されます。
初期値はtrueです。
jQuery1.2から追加されました。

<button id="animate">animate</button>
<p id="steps"></p>
<div class="block"></div>

$("#animate").click(function(){
  $(".block").animate(
    {width: "toggle", opacity: "toggle"},
    {duration: "slow", easing: "linear",
     complete: function(){alert("completed!");},
     step: function(s){$("#steps").text(s)}
    }
  );
});