animate( properties[, duration][, easing][, complete] )

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

記述方法

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

引数

properties / CSSプロパティ

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

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

キーの指定について

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

値の指定について

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

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

jQuery の animate の縦方向の出現や隠す動作。

jQuery の animate の横方向の出現や隠す動作。

[duration] / 速度（動作時間）

オプション。

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

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

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

[easing] / イージング関数名

オプション。

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

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

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

[complete] / アニメーション完了後に実行する関数

オプション。

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

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

実装例（サンプル）

実装例（サンプル）の動作について

赤いブロック部分を、クリックすると、グレーのブロック部分が、左方向へ動きながら消える。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、右方向へ動きながら出現。速度( duration )は、slow を指定してある。

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

JavaScript

CSS

HTML