高さを変化させて、要素を「アニメーション化」する：
$("button").click(function(){
$("#box").animate({height: "300px"});
});
Try it Yourself »
animate() メソッドは、１ 組の CSS プロパティのカスタムアニメーションを実行します。
このメソッドは、CSS スタイルによって、ある状態から別状態に要素を変化させます。 アニメーション効果を作り出すために、CSS プロパティの値を徐々に変化させます。
数値のみがアニメーションにできます（"margin:30px" のような場合）。 文字列値は、アニメーションにすることができません（"background-color:red" のような場合）。
チップ: 相対的なアニメーションには、"+=" または "-=" を使用します。
(selector).animate({styles},speed,easing,callback)
| パラメータ | 説明 |
|---|---|
| styles | 必須。アニメーション化する 1 つ以上の CSS プロパティ/値を指定する。 注: animate() メソッドで使用する場合、プロパティ名はキャメルケースでなければならない： padding-left の代わりに paddingLeft、margin-right の代わりに marginRight などのように記述する必要がある。 アニメーション化できるプロパティ：
数値のみがアニメーションにできる（"margin:30px" のような場合）。 "show"、"hide"、"toggle" 以外の文字列値はアニメーションにすることができない（"background-color:red" のような場合）。この値は、アニメーション要素を表示したり、非表示にしたりすることができます。 チップ: カラーアニメーションは、コア jQuery ライブラリに含まれていません。 色をアニメーション化する場合は、jQuery.comから Color Animations plugin をダウンロードする必要があります |
| speed | 任意。アニメーションの速度を指定する。デフォルト値は 400 ミリ秒
指定可能な値：
|
| easing | 任意。アニメーションの各時点における速度を指定する。デフォルト値は "swing"。指定可能な値：
|
| callback | 任意。アニメーションが完了した後に実行される関数。 コールバックの詳細については、jQuery Callback を参照。 |
(selector).animate({styles},{options})
| パラメータ | 説明 |
|---|---|
| styles | 必須。アニメーション化するために 1 つ以上の CSS プロパティ/値を指定する （可能な値は上記参照） |
| options | 任意。アニメーションに追加のオプションを指定する。指定可能な値：
|
コールバック関数で animate() を使用する
アニメーションを繰り返すコールバック関数での animate() の使用方法。
Alternate 構文の例
複数のアニメーション・スタイルとオプションを指定するために、alternate 構文を使用する。
Using the alternate syntax to specify multiple animation styles and options.
animate() を使用してプログレスバーを作成する
プログレスバーを作成するためのに animate() メソッドを使用する方法。
ページ・アンカーへのスムーズなスクロールを追加
リンクへのスムーズなスクロールを追加するために animate() を使用する方法。