animate( properties, options )

jQuery API の animate( properties, options ) は、カスタムアニメーションを実行するメソッド。１つ目の引数である properties に設定したCSSプロパティを、セレクターの要素に、徐々に変化するアニメーションで反映させる。duration 、easing などのオプションは、２つ目の引数である options にハッシュで指定できる。

記述方法

１つ目の引数である「properties / CSSプロパティ」に設定したCSSプロパティを、セレクターの要素に、徐々に変化するアニメーションで反映させる。

引数

properties / CSSプロパティ

設定できるのは、値が数値型のCSSプロパティ。

「{ キー：値, キー：値 } 」のようにハッシュで指定する。

キーの指定について

キャメルケースで表記する。例えば、「border-width」であれば、「borderWidth」と表記する。

値の指定について

数値：'10px'、'1.3em'、0.5 などのような数値。「+=」「-=」を数値の前に表記することで、現在値に加算減算する相対的指定もできる。

文字列：'toggle'、'show'、'hide'

jQuery の animate で、透明⇔不透明のアニメーション動作。

options / オプション

duration 、easing などのオプションを、ハッシュで指定。

duration

速度（動作時間）。

ミリ秒単位の数字、もしくは、'slow'、'normal'、'fast' の文字列で指定。

例えば、2000 を指定すると、２秒間のアニメーションとなる。

jQuery の animate の速度（動作時間）を指定する方法。

easing

イージング関数名。

'linear'、'swing' の文字列で指定。

イージング関数とは、加速度を加味したような動作パターンのこと。jQuery にデフォルトで用意されているのは、linear と swing のシンプルな動作パターンだけだが、jQuery Easing Plugin などの jQuery プラグインを導入することで、使える動作パターンを増やすことができる。

jQuery の animate の動作パターンを指定する方法。

complete

アニメーション完了後に呼び出したい関数を指定することができる。

jQuery の animate のアニメーション終了後に関数を実行する方法。

step

アニメーションの各ステップの後に呼び出したい関数を指定することができる。

jQuery の animate で、アニメーションのステップごとに関数を実行

queue

エフェクトキューにアニメーションを配置するかどうかを、ブーリアン（論理型）で指定することができる。

false を設定すると、アニメーションをすぐに実行する。

true を設定すると、アニメーションをエフェクトキューに登録し、順番に実行する。

jQuery の animate による同時多発アニメーション

実装例（サンプル）

サンプルの動作について

1. 赤いブロック部分をクリックすると、右側にオレンジ色のブロックが現れる。
2. オレンジ色のブロックが完全に出現すると、オレンジ色のブロックの右側に、「表示しました。」と表示される。
3. もう一度、赤いブロック部分をクリックすると、オレンジ色のブロックが左に動きながら消える。
4. オレンジ色のブロックが完全に消えると、「表示しました。」の文字も消える。

実装例（サンプル）のソースコード

JavaScript

CSS

HTML