要素をランダムにフェードイン/アウトさせる「LivingFade jQuery Plugin」

要素をランダムにフェードイン/アウトさせる「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」サンプル

sponsors

「要素をランダムにフェードイン/アウトさせる「LivingFade jQuery Plugin」」をシェアする

記事作成:
記事URL:

TOP > > 要素をランダムにフェードイン/アウトさせる「LivingFade jQuery Plugin」