jQueryのanimate()処理完了後に別のanimate()処理を2段階でやって、2段階右折の様にボックスエリアを移動させる方法をご紹介します。
Contents
ディスプレイ広告
2段階右折の様にボックスエリアを移動させるCSSの記述
※animate()で移動させるボックスエリア(#Box)のCSS記述です。必要に応じて変更して下さい。
<style type="text/css"> <!-- body { font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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-->
jQueryのanimate処理終了後に別animate処理をさせたページ
jQueryのanimate処理終了後に別animate処理をさせたページデモ
この方法だと2段階とは言わず何段階処理も出来ますね。
さらに同時進行で2つ以上の別処理を実行させるとやり方次第で複数ののアニメーション演出が出来ます。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。