jQuery UIのshow()エフェクトを使ってアニメーション演出する方法をご紹介します。
Contents
jQuery UIのshow()エフェクトを使ってアニメーション演出するJs読込ファイル
※jquery.min.js、jquery-ui.min.jsファイルを読み込みます。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
show()エフェクトを使ってアニメーション演出するCSSの記述
※「h1、h2、idDiv」を非表示にしてます。必要に応じて変更して下さい。
<style type="text/css">
<!--
body {
margin: 0px;
font-size:14px;
}
h1{
font-size:22px;
font-weight:bold;
line-height:1.2em;
text-align:center;
padding:15px 0;
display:none;
}
h2{
font-size:20px;
font-weight:bold;
line-height:1.2em;
text-align:center;
padding:15px 0;
display:none;
}
#idWrap{
width:600px;
margin:0 auto;
text-align:center;
}
#idDiv{
display:none;
}
-->
</style>
show()エフェクトを使ってアニメーション演出するHTMLの記述
※非表示の「h1、h2、idDiv」をshow()エフェクトで順番に表示します。
<div id="idWrap">
<h1 id="idH1">このh1タグはjQuery UIのshowエフェクトを使用したアニメーション演出では無く、fadeInで表示してます。</h1>
<div id="idDiv"><img src="logo.jpg" alt="DAD UNION"></div>
<h2 id="idH2">上記画像とこの文字はjQuery UIのshowエフェクトを使用した<br>アニメーション演出です。</h2>
</div>
jQuery UIのshow()エフェクトを使ってアニメーション演出するJavaScriptの記述
※非表示の「h1、h2、idDiv」をshow()エフェクトでdelay()を使って順番に表示します。必要に応じて変更して下さい。
<script type="text/javascript">
<!--
$('#idH1').fadeIn(1500);
$('#idDiv').delay(1700).show('drop',{direction:"left"},500);
$('#idH2').delay(2200).show('drop',{direction:"right"},500);
-->
</script>
jQuery UIのshowエフェクトを使用したアニメーション演出のデモページ
jQuery UIのshowエフェクトを使用したアニメーション演出のデモ
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
