jQueryプラグイン LivingFadeを使って、要素をランダムにフェ−ド。

LivingFadeプラグインを使うことで、class名を "fademe"とした指定ブロック内のdiv要素(黄緑)をランダムな速度で個別にフェードインまたはフェードアウトします。 jQueryがターゲット可能なDOMの要素すべてに適用できます。

デフォルトのlivingfade。ボタンをクリックすると、フェードインまたはフェードアウトします。効果が終了した後にコールバックで状態を赤い文字で表示します。

 1
2
 3
4
 5
6
 7
8
 

div要素のclass名を "fademe"以外(赤)にすることで、フェードインまたはフェードアウトの効果を適用させずに残すことも可能です。同じく効果が終了した後にコールバックで状態を赤い文字で表示します。

1
2
4
5
6
8
 

効果の詳細設定(デフォルト)

$('#demo1').livingFade({ 
	maxDelay: 1000, // maximum delay before an element is faded in
	minSpeed: 500, // minimum fade speed (timespan of fade)
	maxSpeed: 250, // maximum fade speed
	fadeTo: 0, // 0 = fade out, 1 = fade in, 0.5 = half transparent
	affected: '.fademe', // class of affected children
	onFinish: function(){ } // callback after all fades have finished
});