jQueryのanimateを色々試して比べてみた。

jQuery animate

jQueryのanimate()メソッドを使えば文字や画像などのオブジェクトを簡単に動かしてアニメーションさせることができます。この animate()メソッドは奥が深くて、オプションを指定することで動作をカスタマイズすることができます。

PR

オプションの指定なし（.box1）

まずは、オプションの指定をせず単純にクリックしたら leftプロパティで右に動かしてみます。

↓ クリックすると動きます。
（再確認は再読み込みしてください）

.box1

　
<span class="box1">WEB-LABO</span>
　

.box1{
	position: relative;
	font-weight: bold;
	font-size: 32px;
	font-family: impact;
	color: #333;
	background-color: #eee;
	display: inline;
	padding: 10px;
}

<script type="text/javascript">
$(function(){
	$(".box1").click(function(){
		$(".box1").animate({
			"left" : "300px"
		});
	});
});
</script>
PR

 

スピードだけ指定する（.box2）

今回は３秒間でアニメーションが完了するようにしてみます。動き始めから止まるまで３秒なので、ゆっくり動きます。

↓ クリックすると動きます。
（再確認は再読み込みしてください）

.box1

.box2

　
<span class="box1">.box1</span>

<span class="box2">.box2</span>
　

.box1,.box2{
	position: relative;
	font-weight: bold;
	font-size: 32px;
	font-family: impact;
	color: #333;
	background-color: #eee;
	display: inline;
	padding: 10px;
}

CSSは同じです。

<script type="text/javascript">
$(function(){
	$(".box1").click(function(){
		$(".box1").animate({
			"left" : "300px"
		});
	});

	$(".box2").click(function(){
		$(".box2").animate({
			"left" : "300px"
		},3000);
	});

});
</script>

.box2は、アニメーションの時間を3秒にしています。（12行目）

1000で1秒、500で0.5秒です。また、”slow” と “fast” が使えます。

 

duration でアニメーション時間を設定（.box3）

アニメーションの時間を、durationというオプションを使って設定してみます。ちなみにアニメーション時間は .box2 と同じ3秒です。

↓ クリックすると動きます。
（再確認は再読み込みしてください）

.box1

.box2

.box3

<span class="box1">.box1</span>

<span class="box2">.box2</span>

<span class="box3">.box3</span>

.box1,.box2,.box3{
	position: relative;
	font-weight: bold;
	font-size: 32px;
	font-family: impact;
	color: #333;
	background-color: #eee;
	display: inline;
	padding: 10px;
}

CSSは同じです。

<script type="text/javascript">
$(function(){
	$(".box1").click(function(){
		$(".box1").animate({
			"left" : "300px"
		});
	});

	$(".box2").click(function(){
		$(".box2").animate({
			"left" : "300px"
		},3000);
	});

	$(".box3").click(function(){
		$(".box3").animate({
			"left" : "300px"
		},{
			"duration" : 3000
		});
	});

});
</script>

duration でアニメーションの時間を指定します。
1000で1秒、500で0.5秒です。

3000なので3秒です。
.box2 と比べても同じ感じです。

 

easingで動き方を指定

今度は、easing で動き方を指定してみます。
duration は、3000で3秒に設定しています。

“easing” : “linear”　・・・（.box4）
“easing” : “swing”　・・・（.box5）

↓ クリックすると動きます。
（再確認は再読み込みしてください）

.box1

.box2

.box3

.box4

.box5

動きを比べてみるとハッキリしますね。
.box4で指定した「linear」は、最初から最後まで同じスピードです。
対して、.box5で指定した「swing」は、ゆっくり動き始め止まる時もゆっくりです。また、.box2や.box3と同じ動きなので、easingを指定しない場合は、初期設定で「swing」だと分かります。

<span class="box1">.box1</span>

<span class="box2">.box2</span>

<span class="box3">.box3</span>

<span class="box4">.box4</span>

<span class="box5">.box5</span>

.box1,.box2,.box3,.box4,.box5{
	position: relative;
	font-weight: bold;
	font-size: 32px;
	font-family: impact;
	color: #333;
	background-color: #eee;
	display: inline;
	padding: 10px;
}

<script type="text/javascript">
$(function(){
	$(".box1").click(function(){
		$(".box1").animate({
			"left" : "300px"
		});
	});

	$(".box2").click(function(){
		$(".box2").animate({
			"left" : "300px"
		},3000);
	});

	$(".box3").click(function(){
		$(".box3").animate({
			"left" : "300px"
		},{
			"duration" : 3000
		});
	});

	$(".box4").click(function(){
		$(".box4").animate({
			"left" : "300px"
		},{
			"duration" : 3000,
			"easing" : "linear"
		});
	});

	$(".box5").click(function(){
		$(".box5").animate({
			"left" : "300px"
		},{
			"duration" : 3000,
			"easing" : "swing"
		});
	});

});
</script>

 

completeで、アニメーション完了後の処理を記述

completeを使うことで、アニメーションが終わった後の処理を記述することができます。今回は、次の２つを比較します。

移動しながら透明になっていく　・・・（.box6）
移動が完了してから透明になる　・・・（.box7）

↓ クリックすると動きます。
（再確認は再読み込みしてください）

.box6

.box7

<span class="box6">.box6</span>

<span class="box7">.box7</span>

.box6,.box7{
	position: relative;
	font-weight: bold;
	font-size: 32px;
	font-family: impact;
	color: #333;
	background-color: #eee;
	display: inline;
	padding: 10px;
}

CSSは、今までと同じです。

<script type="text/javascript">
$(function(){
	$(".box6").click(function(){
		$(".box6").animate({
			"left" : "300px",
			"opacity" : 0
		});
	});

	$(".box7").click(function(){
		$(".box7").animate({
			"left" : "300px"
		},{
			complete : function(){
				$(".box7").animate({
					"opacity" : 0
				});
			}
		});
	});

});
</script>

 

最後は、おまけ！

complete で、元の位置に戻るアニメーションを記述してあげると、行ったり来たりで何回もクリックできます。

↓ クリックすると動きます。

.box8

　
<span class="box8">.box8</span>
　

.box8{
	position: relative;
	font-weight: bold;
	font-size: 32px;
	font-family: impact;
	color: #333;
	background-color: #eee;
	display: inline;
	padding: 10px;
}

<script type="text/javascript">
$(function(){

	$(".box8").click(function(){
		$(".box8").animate({
			"left" : "300px"
		},{
			complete : function(){
				$(".box8").animate({
					"left" : "0px"
				});
			}
		});
	});

});
</script>

その他のTechWebTipsはこちら

 

 

関連記事