jQuery animate（）メソッド
例
要素の高さを変更して、要素を「アニメーション化」します。
$("button").click(function(){
$("#box").animate({height: "300px"});
});
定義と使用法
animate（）メソッドは、CSSプロパティのセットのカスタムアニメーションを実行します。
このメソッドは、CSSスタイルを使用して要素をある状態から別の状態に変更します。CSSプロパティの値を徐々に変更して、アニメーション効果を作成します。
アニメーション化できるのは数値のみです（「margin：30px」など）。文字列「show」、「hide」、「toggle」を除いて、文字列値をアニメーション化することはできません（「background-color：red」など）。これらの値により、アニメーション化された要素の表示と非表示が可能になります。
ヒント：相対アニメーションには「+ =」または「-=」を使用します。
構文
(selector).animate({styles},speed,easing,callback)
| Parameter | Description |
|---|---|
| styles | Required. Specifies one or more CSS properties/values to animate. Note: The property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on. Properties that can be animated: Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red"), except for the strings "show", "hide" and "toggle". These values allow hiding and showing the animated element. |
| speed | Optional. Specifies the speed of the animation. Default value is 400 milliseconds Possible values:
|
| easing | Optional. Specifies the speed of the element in different points of the animation. Default value is "swing". Possible values:
|
| callback | Optional. A function to be executed after the animation completes. To learn more about callback, please read our jQuery Callback chapter |
代替構文
(selector).animate({styles},{options})
| Parameter | Description |
|---|---|
| styles | Required. Specifies one or more CSS properties/values to animate (See possible values above) |
| options | Optional. Specifies additional options for the animation. Possible values:
|
自分で試してみてください-例
animate（）を使用するアニメーションを繰り返すコールバック関数でanimate（）を使用する方法。
代替構文を使用して、複数のアニメーションスタイルとオプションを指定します。
animate（）メソッドを使用してプログレスバーを作成する方法。
追加するanimate（）を使用してリンクにスムーズなスクロールを追加する方法。