jQuery animate 要素をアニメーションで動かす

jQueryのanimateメソッドで、アニメーションの動きを追加するサンプルです。

説明	animateメソッド
サンプル	要素を横に移動させる
	要素を斜めに移動させる
	要素を下に移動した後、右に移動させる
	要素の文字を拡大縮小する＋時間＋関数

animateメソッド

.animate( properties [, duration ] [, easing ] [, complete ] )

jQueryのanimateメソッドです。
アニメーションの動きを追加できます。
以下はjQueryサイトのanimateメソッドのページです。
http://api.jquery.com/animate/

要素を横に移動させる

animateメソッドで要素を横に移動させるサンプルです。
ボタン1を押すと黄色い四角が右に、ボタン2を押すと左に移動します。

上記サンプルのコードです。

<style>
#box1{height:30px;width:30px;border:1px solid #000;background-color:yellow;}
</style>

<input type="button" id="button1" value="ボタン1" />
<input type="button" id="button2" value="ボタン2" />
<div id="box1"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button1").click(function() {
		$("#box1").animate({
			marginLeft:'200px'//margin-leftをキャメルケースで書く
		});
	});

	$("#button2").click(function() {
		$("#box1").animate({
			marginLeft:'0px'//margin-leftをキャメルケースで書く
		});
	});

</script>

2行目は、動かす要素のCSSです。背景色を黄色にしています。
7行目は、実際に動く要素です。
13行目は、ボタン1が押されたときに動きます。
14行目は、cssのmargin-leftをキャメルケースでmarginLeftと書く必要があります。
19行目は、ボタン2が押されたときに動きます。
20行目も、15行目と同じでキャメルケースで書く必要があります。

テストポイント

要素を斜めに移動させる

animateメソッドで要素を斜めに移動させるサンプルです。
ボタン3を押すと黄色い四角が斜め下に移動し、ボタン4を押すと元に戻ります。

上記サンプルのコードです。

<style>
#box2{height:30px;width:30px;border:1px solid #000;background-color:yellow;}
</style>

<input type="button" id="button3" value="ボタン3" />
<input type="button" id="button4" value="ボタン4" />
<div id="box2"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button3").click(function() {
		$("#box2").animate({
			marginTop:'50px', //margin-topをキャメルケースで書く
			marginLeft:'100px' //margin-leftをキャメルケースで書く
		});
	});

	$("#button4").click(function() {
		$("#box2").animate({
			marginTop:'0px', //margin-topをキャメルケースで書く
			marginLeft:'0px' //margin-leftをキャメルケースで書く
		});
	});

</script>

14,15行目でmarginTopとmarginLeftを指定して斜め下に移動させています。

要素を下に移動した後、右に移動させる

animateメソッドで要素を下に移動した後、右に移動させるサンプルです。
ボタン5を押すと黄色い四角が下に移動したあと右に2回移動し、ボタン6を押すと元の位置に戻ります。

上記サンプルのコードです。

<style>
#box3{height:30px;width:30px;border:1px solid #000;background-color:yellow;}
</style>

<input type="button" id="button5" value="ボタン5" />
<input type="button" id="button6" value="ボタン6" />
<div id="box3"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button5").click(function() {
		$("#box3")
			.animate({marginTop:'50px'}) //margin-topをキャメルケースで書く
			.animate({marginLeft:'50px'}) //margin-leftをキャメルケースで書く
			.animate({marginLeft:'100px'}) //margin-leftをキャメルケースで書く
	});

	$("#button6").click(function() {
		$("#box3")
			.animate({marginLeft:'50px'}) //margin-leftをキャメルケースで書く
			.animate({marginLeft:'0px'}) //margin-leftをキャメルケースで書く
			.animate({marginTop:'0px'}) //margin-topをキャメルケースで書く
	});

</script>

14行目で下に移動させ、15,16行目で右に2回移動させています。

要素の文字を拡大縮小する＋時間＋関数

animateメソッドで要素の文字を拡大縮小する＋アニメーションする時間＋関数のサンプルです。
ボタン7を押すと文字が2秒かけて拡大しアラート関数を実行し、ボタン8を押すと文字が縮小します。

あ

上記サンプルのコードです。

<style>
#box4{height:30px;width:30px;border:1px solid #000;background-color:yellow;}
</style>

<input type="button" id="button7" value="ボタン7" />
<input type="button" id="button8" value="ボタン8" />
<div id="box4">あ</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	$("#button7").click(function() {
		$("#box4").animate(
			{fontSize:'24px'},//キャメルケースで書く
			2000, //省略可
			function(){alert("test1");}//省略可
		)
	});

	$("#button8").click(function() {
		$("#box4").animate(
			{fontSize:'13px'}//キャメルケースで書く
		)
	});

</script>

15行目はアニメーションする時間です。省略可能です。
16行目は関数です。省略可能です。