jQueryのanimateメソッド

これまでのレッスンで取り上げたすべてのメソッドは、いくらか制限があります - それらは作成された目的通りに動作します。アニメーションをより細かく制御したい場合は、汎用的なメソッド animate を使用してください。

このメソッドの第一引数はオブジェクトを取り、アニメーションさせたいCSSプロパティの新しい値を指定します。第二引数は、アニメーションの実行時間です。

次のHTMLコードを用いて、このメソッドを実装してみましょう:

<button id="button">click me</button>
<div id="elem">text...</div>

CSSは次のようになっているとします:

#elem {
	width: 150px;
	height: 150px;
	padding: 10px;
	border: 1px solid green;
}

ボタンをクリックすると、要素が次のサイズまで縮小するようにしましょう: 高さ - 50px、幅 - 100px:

$('#button').click(function() {
	$('#elem').animate({height: 50, width: 100}, 1000);
});

値が height: '+=50' という形式で指定された場合、アニメーションは次のように動作します: 現在の高さに 50px (この例では) が加算され、要素は新しい値まで滑らかにアニメーションします。例を見てみましょう:

$('#button').click(function() {
	$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

animateメソッドの詳細については、jQueryのリファレンスをご覧ください。

次のようなマークアップがあります:

<body>
	<div id="block"></div>
</body>

div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 20px;
}

#block のdivがクリックされたとき、その幅が 200px まで増加し、その変化が 1100ms で行われるようにしてください。

1番目のタスクのマークアップを使用してください。 #block のdivがクリックされるたびに、その幅が 200px ずつ増加し、各増加が 900ms で行われるようにしてください。

1番目のタスクのマークアップを使用してください。 #block のdivがクリックされるたびに、その幅と高さが 100px ずつ増加し、各増加が 950ms で行われるようにしてください。

1番目のタスクのマークアップを使用してください。 #block のdivがクリックされるたびに、それが右に 100px 移動し、各移動が 700ms で行われるようにしてください。