jQueryのanimate処理完了後に別のanimate処理をやって見る

jQueryのanimate処理完了後に2段階で別のanimate処理をやって、2段階右折の様にボックスエリアを移動させてみます。

1.CSSの記述例

<style type="text/css">
<!--
#Box{
    width:200px;
    height:200px;
	background-color:#333;
	margin:0 auto;
	color:#FFF;
	position:relative;
}
-->
</style>

2.読み込むJsファイルとJavaScritpの記述例

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

3.HTMLの記述例

    <input type="button" id="idBtn" value="ボタンクリック">

    

<div id="Box"></div>
<!--/Box-->

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

これでしたら2段階とは言わず何段階でもいけそうです。
さらに同時進行で2つ以上の別処理を実行させるとやり方次第でイイ感じな事が出来そうな気がします。

※流用される場合は自己責任でお願いします。