例
その高さを変えることによって、要素を「アニメーション化」：
$("button").click(function(){
$("#box").animate({height: "300px"});
});
»それを自分で試してみてください 定義と使用法
animate()メソッドは、CSSプロパティのセットのカスタムアニメーションを実行します。
この方法では、CSSスタイルである状態から別の状態の要素を変更します。 CSSプロパティの値は、アニメーション効果を作成するために、徐々に変更されます。
数値のみが（のようにアニメーション化することができます"margin:30px" ）。 文字列値（のようにアニメーション化することができない"background-color:red" ）、文字列以外の"show", "hide"と"toggle" 。 これらの値は、アニメーション要素を隠し、示すことができます。
ヒント：使用"+=" "-=" "+=" "-="に対する相対的なアニメーション。
構文
(selector).animate({styles},speed,easing,callback)| パラメーター | 説明 |
|---|---|
| styles | 必須。 アニメーション化するための1つまたは複数のCSSプロパティ/値を指定します。 注：で使用する場合、プロパティ名はキャメルケースでなければならないanimate()メソッド：あなたはとても上paddingLeftを書く代わりに、パディング左、marginRightの代わりにマージン右、とする必要があります。 アニメーション化することができますプロパティ：
数値のみが（のようにアニメーション化することができます"margin:30px" ）。 文字列値（のようにアニメーション化することができない"background-color:red" ）、文字列以外の"show", "hide"と"toggle" 。 これらの値は、アニメーション要素を隠し、示すことができます。 ヒント：カラーアニメーションはコアjQueryライブラリに含まれていません。あなたは色をアニメーション化したい場合は、ダウンロードする必要がカラーアニメーションプラグインをからjQuery.com |
| speed | 任意。 アニメーションの速度を指定します。 デフォルト値は400ミリ秒です 可能な値：
|
| easing | 任意。 アニメーションの異なる点における要素の速度を指定します。 デフォルト値は"swing" 。 可能な値：
|
| callback | 任意。 アニメーションが完了した後に実行される機能。 コールバックの詳細については、私たちのお読みくださいjQueryのコールバックの章を |
代替構文
(selector).animate({styles},{options})| パラメーター | 説明 |
|---|---|
| styles | 必須。 一つ以上のCSSプロパティを指定します/値をアニメーション化する（上記の可能な値を参照してください） |
| options | 任意。 アニメーションの追加オプションを指定します。 可能な値：
|
それを自分で試してみてください - 例
使用してanimate()コールバック関数で
使用方法animate()アニメーションを繰り返しコールバック関数で。
代替構文例
複数のアニメーションのスタイルとオプションを指定するには、別の構文を使用しました。
使用してanimate()プログレスバーを作成します
使い方animate()プログレスバーを作成する方法を。
ページのアンカーへのスムーズスクロールを追加します。
使い方animate()リンクにスムーズスクロールを追加します。