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アナリティクスタグは流用しないで下さい。