インとアウトどっちすんの!?

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.livingfade-0.2.js"></script>
<script>
	$(window).load(function(){
		$('#LivingFadeBtn01').on('click', function(){
			$('#LivingFadeDemo').livingFade({ 
				fadeTo: 1,
				maxDelay: 1500,
				minSpeed: 2000,
				maxSpeed: 500,
				affected: '.LivingFade-demo',
				onFinish: function(){
					$('#LivingFadeBtn01').attr('disabled', true);
					$('#LivingFadeBtn02').attr('disabled', false);
					alert('フェードイン完了!');
				} 
			});
		});
		$('#LivingFadeBtn02').on('click', function(){
			$('#LivingFadeDemo').livingFade({ 
				fadeTo: 0,
				maxDelay: 1500,
				minSpeed: 2000,
				maxSpeed: 500,
				affected: '.LivingFade-demo',
				onFinish: function(){
					$('#LivingFadeBtn02').attr('disabled', true);
					$('#LivingFadeBtn01').attr('disabled', false);
					alert('フェードアウト完了!');
				} 
			});
		});
	});
</script>

//オプション一覧
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
<button id="LivingFadeBtn01" class="blue" disabled>フェードイン</button>
<button id="LivingFadeBtn02" class="red">フェードアウト</button>
<p class="result">インとアウトどっちすんの!?</p>
<div id="LivingFadeDemo">
	<div class="LivingFade-demo">ふ</div>
	<div class="LivingFade-demo">ぇ</div>
	<div class="LivingFade-demo">ー</div>
	<div class="LivingFade-demo">ど</div>
	<div class="LivingFade-demo">い</div>
	<div class="LivingFade-demo">ん</div>
	<div class="LivingFade-demo">だ</div>
	<div class="LivingFade-demo">ろ</div>
	<div class="LivingFade-demo">う</div>
	<div class="LivingFade-demo">が</div>
	<div class="LivingFade-demo">ふ</div>
	<div class="LivingFade-demo">ぇ</div>
	<div class="LivingFade-demo">ー</div>
	<div class="LivingFade-demo">ど</div>
	<div class="LivingFade-demo">あ</div>
	<div class="LivingFade-demo">う</div>
	<div class="LivingFade-demo">と</div>
	<div class="LivingFade-demo">だ</div>
	<div class="LivingFade-demo">ろ</div>
	<div class="LivingFade-demo">う</div>
	<div class="LivingFade-demo">が</div>
	<div class="LivingFade-demo">か</div>
	<div class="LivingFade-demo">か</div>
	<div class="LivingFade-demo">っ</div>
	<div class="LivingFade-demo">て</div>
	<div class="LivingFade-demo">こ</div>
	<div class="LivingFade-demo">い</div>
	<div class="LivingFade-demo">や</div>
</div>

LivingFadeについて

LivingFadeは、指定要素をランダムにフェードイン、フェードアウトさせるプラグインです。
画像ギャラリーなどで使うとおもしろいかも。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスNo license
対応ブラウザ

関連するjQueryプラグイン

  • ResizeEnd

    ResizeEnd

    ResizeEndは、ウィンドウサイズを変更後のイベント設定できる

  • PercentageLoader

    PercentageLoader

    とてもきれいにロード内容をパーセント表示してくれる

  • Toolbar

    Toolbar

    コンパクトなツールバーを設置できる

  • FaviconNotifier

    FaviconNotifier

    ファビコンに数字を表示したり、変えたりすることができる

  • RealShadow

    RealShadow

    RealShadowは、マウスの動きに追随するシャドウを簡単に設置できる