show:jQuery UIのエフェクトを使用してアニメーション演出
- 2019.07.14
- JavaScript jQuery
- jquery-ui, アニメーション, エフェクト

jQuery UIのshowエフェクトを使用してみました。
1.ヘッダーとCSSの記述例
<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> <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>
「h1、h2、idDiv」を非表示にしてます。
2.HTMLの記述例
<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エフェクトを使用した アニメーション演出です。</h2> </div>
3.JavaScriptの記述例
「body」の終了タグの直前に以下の内容を記述してます。
<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.scrollUp:ページトップへのアンカーリンクを任意の箇所に自動表示させるJs 2019.07.13
-
次の記事
onmousemoveでマウスカーソルに文字を追尾させる方法 2019.07.15