animateメソッド

メソッド animate は様々なCSSプロパティに対するアニメーション効果を作成することができます。唯一必須のパラメータは、メソッド css に渡すものと同様の、 CSSプロパティを持つオブジェクトです。 jQueryの基本的な機能では、非数値や複数の値を持つ多くのプロパティ（例えば background-color など）はアニメーション化できません。また、CSSプロパティの省略名（例えば font など）が常にサポートされているわけではなく、代わりに fontSize または font-size を使用する必要があります。値の前に '+=' または '-=' を付けることができ、その場合、指定された値がプロパティの現在の値に加算または減算されます。また、数値の代わりに show、 hide、または toggle を指定することもできます。 animate を含むすべてのjQueryエフェクトは、設定 jQuery.fx.off = true を使用してグローバルに無効にすることができ、これにより継続時間の値が0に設定されます。

構文

アニメーションの最初のパラメータは、キー: 値の形式で、アニメーション化しようとしている CSSプロパティとその値を持つオブジェクトが渡されます。残りのパラメータはオプションと見なされます。 2番目のパラメータは、アニメーションの継続時間をミリ秒単位で指定します（デフォルトは 400ms）。 3番目のパラメータはトランジションのイージング関数（デフォルトは swing）、 4番目のパラメータはアニメーション実行後に起動するコールバック関数です：

.animate(properties, [duration ], [easing ], [callback ]);

時間はミリ秒だけでなく、キーワード slow (600ms) および fast (200ms) でも指定できます。値が大きいほどアニメーションは遅くなります。メソッドには、キー: 値のペアを含むJavaScriptオブジェクトの形式で、様々なオプションを2番目のパラメータとして渡すこともできます：

.animate(properties, options);

例えば、CSSプロパティ width および height に値 toggle を設定してみましょう。継続時間は 5000ms、イージング関数はオブジェクトとして渡し、幅に対しては線形関数、高さに対しては easeOutBounce とします。また、アニメーション完了時に一度だけ実行される関数を設定します（キー complete を参照）。この関数は、要素 #test の後に、メッセージ 'Animation complete.' を持つdivを配置します：

$('#test').animate({
	width: 'toggle',
	height: 'toggle'
}, {
	duration: 5000,
	specialEasing: {
		width: 'linear',
		height: 'easeOutBounce'
	},
	complete: function() {
		$(this).after('<div>Animation complete.</div>');
	}
});

以下の表に、オブジェクト options のプロパティとメソッド、およびその説明を示します：

名称	説明
`duration`	アニメーションの継続時間（ミリ秒単位）- 文字列または数値。デフォルトは `400ms`。
`easing`	使用するイージング関数を指定します。デフォルトは `swing`。
`queue`	ブール値または文字列。デフォルトは `true`。アニメーションをキューに入れるかどうかを指定します。 `false` の値の場合、アニメーションは即座に開始します。パラメータを文字列として渡すと、アニメーションはこのパラメータで表されるキューに入れられます。カスタム名のキューを使用する場合、アニメーションは自動的に開始されないため、開始するには `dequeue('queuename')` を使用してください。
`specialEasing`	ここにオブジェクトを渡すことができます。このオブジェクトのキーはCSSプロパティ、値はそれに対応するイージング関数となります。
`step`	アニメーション化された各要素の、各アニメーションプロパティに対して呼び出される関数です。 `Tween` オブジェクトを変更して、プロパティ値が設定される前に値を変更することができます。パラメータとして、現在の `tween` 値と `Tween` オブジェクトを受け取ります。
`progress`	アニメーションの各ステップの後に、アニメーション化されるプロパティの数に関係なく、各要素に対して1回だけ呼び出される関数です。この関数は3つのパラメータ、 `animation` （プロミスとして）、 `progress` （`0` から `1` までの数値）、 `remainingMs` （残りミリ秒数）を受け取ります。
`complete`	要素のアニメーション終了後に1回だけ呼び出される関数です。この関数は `animation` （プロミスとして）を受け取ります。
`start`	要素のアニメーションが開始するときに呼び出される関数です。この関数は `animation` （プロミスとして）と `jumpedToEnd` （ブール値。 `true` の場合、アニメーションは自動的に完了します）を受け取ります。
`done`	要素のアニメーションが終了したとき（そのプロミスが正常に完了したとき）に呼び出される関数です。この関数は `animation` （プロミスとして）と `jumpedToEnd` （ブール値。 `true` の場合、アニメーションは自動的に完了します）を受け取ります。
`fail`	要素のアニメーションがエラーで終了したとき（そのプロミスがエラーで完了したとき）に呼び出される関数です。この関数は `animation` （プロミスとして）と `jumpedToEnd` （ブール値。 `true` の場合、アニメーションは自動的に完了します）を受け取ります。
`always`	要素のアニメーションが完了したとき、または完了せずに停止したとき（そのプロミスが正常またはエラーで完了したとき）に呼び出される関数です。この関数は `animation` （プロミスとして）と `jumpedToEnd` （ブール値。 `true` の場合、アニメーションは自動的に完了します）を受け取ります。

例

ボタン #left がクリックされたら、緑の四角形を左に 50px 移動させ、ボタン #right がクリックされたら、右に 50px 移動させましょう。また、継続時間を slow コマンドで 600ms に設定します：

<button id="left">左</button>
<button id="right">右</button>
<div class="block"></div>

div {
	position: absolute;
	background-color: green;
	left: 50px;
	width: 100px;
	height: 100px;
	margin: 5px;
}

$('#right').click(function() {
	$('.block').animate({'left': '+=50px'}, 'slow');
});
	
$('#left').click(function() {
	$('.block').animate({'left': '-=50px'}, 'slow');
});

animateメソッド

構文

例

関連項目