jQuery アニメーションの動きを追加する(animate)

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

animateメソッド
横に動かす
斜めに動かす
下に移動して右に移動する
文字を拡大縮小する＋時間＋関数

animateメソッド

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

横に動かす

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

コード

上記サンプルのコードです。
15,21行目は、cssのmargin-leftをキャメルケースでmarginLeftと書いています。

<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/1.12.4/jquery.min.js"></script>
<script>
$(function() {

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

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

斜めに動かす

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

コード

上記サンプルのコードです。
15,16行目でmarginTopとmarginLeftを指定して斜め下に移動させています。

<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/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#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>

下に移動して右に移動する

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

コード

上記サンプルのコードです。
15行目で下に移動させ、16,17行目で右に2回移動させています。

<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/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#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>

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

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

あ

コード

上記サンプルのコードです。
16行目はアニメーションする時間です。省略可能です。
17行目は関数です。省略可能です。

<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/1.12.4/jquery.min.js"></script>
<script>
$(function() {

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

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