JavaScript

animate()処理後に別のanimate()を2段階処理【jQuery】

  /

今回は、jQueryのanimate()メソッドを使って、あるエリアを2段階で移動させる方法を解説します。2段階移動というと、信号の2段階右折を思い浮かべる方もいるかもしれませんね。
この記事では、アニメーションの最初のステップとして横方向に動かし、その後縦方向に動かすという2段階のアニメーションを行います。jQueryのアニメーション処理を使って、Webページに動きをつけたいと考えている方にはとても参考になる内容となっています。

Contents

ボックスエリアの移動を実現するためのCSSの記述

まずは、アニメーションで動かすボックスエリアのCSSを設定しましょう。ここでは、IDがBoxの要素を移動させるためのCSSを書いています。もちろん、スタイルは自由に変更できるので、デザインに合わせてアレンジしてください。

<style type="text/css">
<!--
body {
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	margin:0;
	padding:0;
	text-align:center;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.2em;
	text-align:center;
	padding:15px 0 10px 0;
}
.cWrap{
	width:700px;
	margin:0 auto;
}
#Box{
    width:200px;
    height:200px;
	background-color:#333;
	margin:0 auto;
	color:#FFF;
	position:relative;
}
-->
</style>

このCSSでは、まず全体のフォントや余白を設定し、ページ全体が中央揃えになるようにしています。ボックスエリア#Boxは幅と高さがそれぞれ200ピクセル、背景色は濃いグレー（#333）で設定しています。position: relative;を指定することで、アニメーションで位置を変更できるようにしています。

アニメーション処理のJavaScript記述

次に、アニメーションを実行するためのJavaScriptコードを書きます。今回はjQueryを使って、ボタンをクリックしたときにボックスエリアが動くようにします。

jquery.min.js（v1.9.1）、jquery.easing.1.3.jsファイルを読み込みます。ボタン（#idBtn）をクリックするとボックスエリア（#Box）が左から右に200px移動し、移動完了後、上から下に150px移動します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
<!--
$(function(){
	$('#idBtn').click(function(){
		$('#Box').animate(
			{
				'left':'200px'
			},
			{
				duration: 'slow',
				easing: 'swing',
				complete: function() {
					$('#Box').animate(
					{
						'top':'150px'
					},
					{
						duration: 1000
					}
				);
			},
		});
    });
});
// -->
</script>

このJavaScriptでは、jQueryのanimate()メソッドを使って2段階のアニメーションを実現しています。#idBtnというIDのボタンがクリックされたときに、まず#Boxが左から右に200ピクセル移動します。アニメーションの速度はduration: ‘slow’で指定し、アニメーションの動きをeasing: ‘swing’で緩やかにしています。そして最初のアニメーションが終わった後、completeコールバック関数で2つ目のアニメーションを実行しています。2つ目のアニメーションでは、top方向に150ピクセル移動させます。

このように、animate()メソッドを使うとアニメーションを2段階以上で実行することが可能です。さらに、コールバック関数を使用することで、次のアニメーション処理を順次行うことができるので、複雑な動きも簡単に作成できます。

HTMLの記述

最後に、実際にアニメーションを実行するためのHTMLを書いてみましょう。ボタンをクリックするとアニメーションが始まるようにします。

<div class="cWrap">

	<h1>下のボタンをクリックすると黒四角ボックスがanimate処理で2段階移動します。</h1>
    
    <input type="button" id="idBtn" value="ボタンクリック" /><br /><br />
    
	<div id="Box"></div><!--/Box-->

</div><!--/cWrap-->

このHTMLコードでは、id=”idBtn”のボタンをクリックするとアニメーションが実行されます。#BoxというIDのボックスエリアが動くので、実行結果を視覚的に確認することができます。

jQueryのanimate処理終了後に別animate処理をさせたページ

実際に動作するデモページを作成したので、ぜひ確認してみてください。

jQueryのanimate処理終了後に別animate処理をさせたページ

jQueryのアニメーションを使った応用例

今回の2段階アニメーションは基本的なものですが、animate()メソッドとコールバック関数を組み合わせることで、複数段階のアニメーションを簡単に実装できます。さらに、easingオプションを使用することで、アニメーションにさまざまな動きの効果を加えることも可能です。

例えば、ボックスが横に移動してから斜めに移動する、サイズを変えながら移動する、といった動きも同様の手順で実現できます。また、animate()メソッドは複数のプロパティを同時にアニメーションさせることもできるので、工夫次第でより複雑で見栄えのする動きを演出することが可能です。

まとめ

今回の内容では、jQueryのanimate()メソッドを使って、2段階でボックスエリアを移動させる方法を解説しました。1つ目のアニメーションが終わった後に次のアニメーションを実行するためには、completeコールバック関数を使うのがポイントです。これを使うことで、2段階だけでなく、3段階、4段階と複数のアニメーションを組み合わせることができます。

また、今回の例を参考にして、ボックスのサイズを変えたり、色を変えたりするなど、さらに工夫を加えてみると、Webページに魅力的な動きをつけることができます。ぜひ、実際にコードを書いて試してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

animate アニメーション complete 処理完了後
関連記事