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

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

目次

animateメソッド

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

横に動かす

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

 

コード

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

<style>
#box1{
height:30px;width:30px;border:1px solid #000;background-color:yellow;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	// ボタン1を押したとき
	$("#btn1").click(function() {
		$("#box1").animate({
			marginLeft:'200px'//margin-leftをキャメルケースで書く
		});
	});
	// ボタン2を押したとき
	$("#btn2").click(function() {
		$("#box1").animate({
			marginLeft:'0px'//margin-leftをキャメルケースで書く
		});
	});
});
</script>
<input type="button" id="btn1" value="ボタン1" />
<input type="button" id="btn2" value="ボタン2" />
<div id="box1"></div>

斜めに動かす

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

 

コード

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

<style>
#box2{
height:30px;width:30px;border:1px solid #000;background-color:yellow;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	// ボタン3を押したとき
	$("#btn3").click(function() {
		$("#box2").animate({
			marginTop:'50px', //margin-topをキャメルケースで書く
			marginLeft:'100px' //margin-leftをキャメルケースで書く
		});
	});
	// ボタン4を押したとき
	$("#btn4").click(function() {
		$("#box2").animate({
			marginTop:'0px', //margin-topをキャメルケースで書く
			marginLeft:'0px' //margin-leftをキャメルケースで書く
		});
	});
});
</script>
<input type="button" id="btn3" value="ボタン3" />
<input type="button" id="btn4" value="ボタン4" />
<div id="box2"></div>

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

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

 

コード

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

<style>
#box3{
height:30px;width:30px;border:1px solid #000;background-color:yellow;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	// ボタン5を押したとき
	$("#btn5").click(function() {
		$("#box3")
			.animate({marginTop:'50px'}) //margin-topをキャメルケースで書く
			.animate({marginLeft:'50px'}) //margin-leftをキャメルケースで書く
			.animate({marginLeft:'100px'}) //margin-leftをキャメルケースで書く
	});
	// ボタン6を押したとき
	$("#btn6").click(function() {
		$("#box3")
			.animate({marginLeft:'50px'}) //margin-leftをキャメルケースで書く
			.animate({marginLeft:'0px'}) //margin-leftをキャメルケースで書く
			.animate({marginTop:'0px'}) //margin-topをキャメルケースで書く
	});
});
</script>
<input type="button" id="btn5" value="ボタン5" />
<input type="button" id="btn6" value="ボタン6" />
<div id="box3"></div>

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

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

コード

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

<style>
#box4{
height:30px;width:30px;border:1px solid #000;background-color:yellow;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	// ボタン7を押したとき
	$("#btn7").click(function() {
		$("#box4").animate(
			{fontSize:'24px'},//キャメルケースで書く
			2000, //省略可
			function(){alert("test1");}//省略可
		)
	});
	// ボタン8を押したとき
	$("#btn8").click(function() {
		$("#box4").animate(
			{fontSize:'13px'}//キャメルケースで書く
		)
	});
});
</script>
<input type="button" id="btn7" value="ボタン7" />
<input type="button" id="btn8" value="ボタン8" />
<div id="box4">あ</div>

関連の記事

jQuery 要素を表示/非表示にするサンプル(showとhide)
jQuery 要素を表示/非表示にするサンプル(toggle)
jQuery 要素をスライドしながら表示/非表示にするサンプル(slideUpとslideDown)
jQuery 要素をスライドしながら表示/非表示にするサンプル(slideToggle)
jQuery 要素をフェードイン/フェードアウトするサンプル(fadeIn/fadeOut)
jQuery 要素をフェードイン/フェードアウトするサンプル(fadeToggle)



△上に戻る