スポンサード

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

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

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

基本の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>

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

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

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

<script src="./jquery.min.js"></script>
<script type="text/javascript">
$(".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>

先の例と同様、移動する要素の到達地点は「上から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>

#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>

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>

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

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

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>

今回は動きが分かりやすいように easeOutBounce を使っています。

click イベントで、#box 要素の四角形が「エフェクト付き」で、右へ600px、下へ300px の位置へと斜め方向に移動します。

jquery.easie.js によるエフェクト のデモ

スポンサード