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



jQueryだけでなくjQuery UIってライブラリがあるのですが、
ちょっとそのshowエフェクトを使用してみました。
(何か昔のFlashバナー的な感じの動きです)

1.ヘッダーとCSSの記述例

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://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="/wp-content/plugins/wp-ogp/default.jpg" alt="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN"></div>
        <h2 id="idH2">上記画像とこの文字はjQuery UIのshowエフェクトを使用した<br>アニメーション演出です。</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>
</body>

 
jQuery UIのshowエフェクトを使用したアニメーション演出のデモ
 

使用させて頂いてるだけ有り難いのですが、jQueryとかjQuery UIとかjQueryなんとか、
とか1つにまとめて貰えないかなって思ったりして。
便利なモノがあればあるほど、益々欲張りになってくるなぁと思いました。