[JS]あらゆる要素をランダムにフェードアウト・インさせるスクリプト -LivingFade

あらゆるDOM要素をランダムなタイミングでフェードアウト・フェードインさせるjQueryのプラグインを紹介します。

デモのキャプチャ

LivingFade jQuery Plugin
デモ

[ad#ad-2]

デモでは複数のdiv要素がボックス状に配置されており、「Fade Out」「Fade In」ボタンをクリックすると、フェードアウト・フェードインのエフェクトがランダムなタイミングで適用されます。

デモのキャプチャ

デモ:ベーシック

callback機能もあり、エフェクトが終了すると、メッセージが表示されます。

エフェクトの適用範囲を指定することも可能で、下記は右下のdiv要素に異なるclass名を与え、その箇所のみ適用させないデモです。

デモのキャプチャ

デモ:適用範囲の指定

LivingFadeの実装

「デモ:ベーシック」を例に実装方法を紹介します。

HTML

対象となる要素を内包するdiv要素に「class="demo1"」を付与します。
※jQueryのセレクタで指定できるものであれば、何でも構いません。

	<div id="demo1">
		<div id="el1a" class="fademe">&nbsp;</div>
		<div id="el2a" class="fademe">&nbsp;</div>
		<div id="el3a" class="fademe">&nbsp;</div>
		<div id="el4a" class="fademe">&nbsp;</div>
		<div id="el5a" class="fademe">&nbsp;</div>
		<div id="el6a" class="fademe">&nbsp;</div>
		<div id="el7a" class="fademe">&nbsp;</div>
		<div id="el8a" class="fademe">&nbsp;</div>
	</div>

外部ファイル

jquery.js」と当スクリプトを外部ファイルとして指定します。

<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.livingfade-0.2.js"></script>

JavaScript

まずは、フェードアウトと終了時のcallbackです。

$('#demo1').livingFade({ 
	onFinish: function(){ 
		$('#demo1status').text('Fade Out Finished!') 
	} 
});

フェードインは下記のようになります。

$('#demo1').livingFade({ 
	fadeTo: 1, 
	onFinish: function(){ 
		$('#demo1status').text('Fade In Finished!') 
	} 
});

スクリプトのオプション

オプションでは、ディレイのタイミングや最小・最大スピードやエフェクトの種類を指定できます。

$('#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
});

LivingFadeの対応ブラウザ

LivingFadeの対応ブラウザは下記の通りです。

  • IE6/7
  • Firefox3.5+
  • Safari4+
  • Chrome
  • Opera9.6

また、jQueryのバージョンは下記に対応しています。

  • jQuery 1.5
  • jQuery 1.4
  • jQuery 1.3.2

[ad#ad-2]

sponsors

top of page

©2018 coliss