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

jQueryのanimate()処理完了後に別のanimate()処理を2段階でやって、2段階右折の様にボックスエリアを移動させる方法をご紹介します。

Contents

2段階右折の様にボックスエリアを移動させるCSSの記述
jQueryのanimate()処理完了後に別のanimate()処理を2段階でやって、2段階右折の様にボックスエリアを移動させるJavaScriptの記述
2段階右折の様にボックスエリアを移動させるHTMLの記述
jQueryのanimate処理終了後に別animate処理をさせたページ

2段階右折の様にボックスエリアを移動させるCSSの記述

※animate()で移動させるボックスエリア（#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>

jQueryのanimate()処理完了後に別のanimate()処理を2段階でやって、2段階右折の様にボックスエリアを移動させるJavaScriptの記述

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

2段階右折の様にボックスエリアを移動させるHTMLの記述

※移動するボックスエリア（id=”Box”）を用意します。ボタン（id=”idBtn”）をクリックするとanimate()処理が実行されます。

<div class="cWrap">

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

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