要素をランダムにフェードイン／アウトさせる「LivingFade jQuery Plugin」
要素のフェードイン／アウトをランダムにさせる「LivingFade jQuery Plugin」を利用すると少し異なった印象を与えられそうです。
また、昨今見られるページ表示後に要素をフェードインさせる、あるいはリンクをクリック後に要素をフェードアウトさせてから遷移させるなども簡単に導入できそうです。
使用方法
LivingFade jQuery Pluginからjquery.livingfade-0.2.jsをダウンロード。
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.livingfade-0.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.class名').click(function(){ //id名がクリックされた時（次の行から記述してもOK）
$('#id名').livingFade({
maxDelay: 1000, // 前の要素がフェードしてからのMAXのディレイ
minSpeed: 500, // 要素間のフェード速度 MIN
maxSpeed: 250, // 要素間のフェード速度 MAX
fadeTo: 0, // 0 = fade out, 1 = fade in, 0.5 = half transparent
affected: '.class2', // 適用させるclass名
onFinish: function(){
//処理
}
});
});
});
</script>
あとは下記のように消える要素を指定すれば完成です。
<a href="#" class="class名">きえろ</a>
<div id="id名">
<div class="class2">えい</div>
<div class="class2">えい</div>
<div class="class2">えい</div>
<!-- 以下要素分 -->
</div>
要素をランダムにフェードイン／アウトさせる「LivingFade jQuery Plugin」サンプル
コメントする
記事作成：2011年7月28日 10:34
