[JS]jQueryのanimateによるアニメーションのサンプルまとめ

jQueryプラグイン・ライブラリ

2013.09.26

jQueryのanimateを使うことで、要素を横に動かしたり縦に動かしたりとアニメーションさせることができます。

また、jQuery Easing Pluginと併用することで、エフェクト付きの面白いアニメーションも実装することができますので、サイトの見せ方にひと工夫加えたい場合などには効果的だと思います。

オブジェクトを縦横方向に移動させる
ボタンクリックによるアニメーション
1. CSS と HTMLのサンプル
jQuery Easing Plugin を使ってエフェクトを付与
1. jQuery Easing Plugin のダウンロード
2. jquery.easing.1.3.js の設置

オブジェクトを縦横方向に移動させる

基本のCSSとHTMLを用意

CSSとHTML側の記述はこんな感じで用意します。

<style>
.contents {
	position:relative;
}
#box {
	position:absolute;
	left:0;
	top:0;
	width:100px;
	height:100px;
	background:#dd0000;
}
</style>

<div id="contents">
    <div id="box"></div>
</div>

<style>

.contents {

position:relative;

}

#box {

position:absolute;

left:0;

top:0;

width:100px;

height:100px;

background:#dd0000;

}

</style>

</div>

これをベースに、jQueryのanimateを利用してオブジェクト（#box）を右へ下へと動かしていこうと思います。

オブジェクトを「右」方向に動かす

まずはオブジェクトを右方向に動かしてみますので、以下のようにleftで動かしたい距離を指定します。

<script src="./jquery.min.js"></script>
<script type="text/javascript">
$(".contents").ready(function(){
	$('#box').animate(
		{'left':'600px'},
		{duration: 3000}
	);
});
</script>

$(".contents").ready(function(){

$('#box').animate(

{'left':'600px'},

{duration: 3000}

);

});

</script>

この場合、右へ動く要素の到達地点は「左から600px動いた所」になります。

またオプションとして、durationで速度を調整することも可能です。

上記例はreadyイベントにより、ページを開くと#box要素の四角形が右へ600px（の位置へ）移動します。

オブジェクトを「右」方向に動かすデモ

オブジェクトを「下」方向に動かす

今度は「下」方向に動かしますので、topで動かしたい距離を指定します。

<script src="./jquery.min.js"></script>
<script type="text/javascript">
$(".contents").ready(function(){
	$('#box').animate(
		{'top':'300px'},
		{duration: 3000}
	);
});
</script>

$(".contents").ready(function(){

$('#box').animate(

{'top':'300px'},

{duration: 3000}

);

});

</script>

先の例と同様、移動する要素の到達地点は「上から300px動いた所」になります。

ページを開くと#box要素の四角形が下へ300px移動します。

オブジェクトを「下」方向に動かすデモ

オブジェクトを「右下」に動かす

もちろん右下のような移動も可能で、その場合は以下のような設定なります。

<script src="./jquery.min.js"></script>
<script type="text/javascript">
$(".contents").ready(function(){
	$('#box').animate(
		{'top':'300px','left':'600px'},
		{duration: 3000}
	);
});
</script>

$(".contents").ready(function(){

$('#box').animate(

{'top':'300px','left':'600px'},

{duration: 3000}

);

});

</script>

#box要素の四角形が右へ600px、下へ300pxの位置へと「斜め方向」に移動します。

オブジェクトを「右下」に動かすデモ

ボタンクリックによるアニメーション

上記までの例は、デモページを開くとアニメ−ションが起こりますが、こちらは「ボタンをクリック」してアニメーションを起こすサンプルです。

<script src="./jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#button01").click(function(){
		$('#box').animate(
			{'top':'300px','left':'600px'},
			{duration: 3000}
		);
	});
});
</script>

$(function(){

$("#button01").click(function(){

$('#box').animate(

{'top':'300px','left':'600px'},

{duration: 3000}

);

});

</script>

CSS と HTMLのサンプル

button01の「クリックしてアニメーション」ボタンをクリックすることで、#box要素が右下の方向へと動きます。

<style>
.contents		{
	position:relative;
}

#box			{
	position:absolute;
	top:0;
	left:0;
	width:100px;
	height:100px;
	background:#dd0000
}

.button			{
	text-align:center;
	margin:0 auto
}
</style>

<div class="contents">
    <div dv id="box"></div>
</div>
<div class="button">
<input type="button" id="button01" value="クリックしてアニメーション">
</div>

<style>

.contents {

position:relative;

}

#box {

position:absolute;

top:0;

left:0;

width:100px;

height:100px;

background:#dd0000

}

.button {

text-align:center;

margin:0 auto

}

</style>

</div>

</div>

clickイベントで、要素を右方向に動かすサンプルです。

click イベントのアニメーションデモ

jQuery Easing Plugin を使ってエフェクトを付与

最後に、エフェクトを加えるためにjQuery Easing Pluginを利用してみます。

jQuery Easing Plugin のダウンロード

以下のページより jQuery Easing Pluginファイルをダウンロードします。
jQuery Easing Plugin

jquery.easing.1.3.js の設置

jQueryファイルと一緒にjquery.easing.1.3.jsを設置します。

<script src="./jquery.min.js"></script>
<script src="./jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function(){
	$("#button01").click(function(){
		$('#box').animate(
			{'top':'300px','left':'600px'},
			'slow',
			'easeOutBounce'
		);
	});
});
</script>