Fade In/Out

このJavaScriptは2001年3月に発売された著書「わたしにもできる動くホームページ」に収録したものです。Internet Explorer 4の頃に作成したものであるため、今はjQueryを使えばもっと簡単に使うことができます。jQueryで使う方法もついでに紹介しておきましょう。

Internet Explorer 4の頃のJavaScript

ID属性で指定した要素をフェードイン/フェードアウトさせるためのDynamicHTML(DOM+JavaScript)です。スクリプトはscriptフォルダにあるものとして記述しています。

Internet ExplorerはVisual Filerを利用し、Netscape6は独自スタイルシート拡張を利用しています。そのため、たぶんOperaなどでは無理。ActiveXを禁止しているとInternet Explorerでもおそらく動作しないことでしょう。

Sample

フェードインとフェードアウトが繰り返されます

<DIV id="fade" style="width:100%; color:red; font-size:20px; font-weight:bold; filter:alpha(Opacity=0); -moz-opacity:0;">フェードインとフェードアウトが繰り返されます</DIV>

ID名は自由ですが、スクリプトの実行時に必ず指定したID名を使用してください。alpha(Opacity=0); -moz-opacity:0;で要素を非表示状態にします。DIV要素には何を入れておいてもかまいません。

Internet ExplorerはVisual Filerを使うので、BODY以外の要素に使う場合は<DIV>内で指定してください。また、必ずstyle属性でwidth(横幅)を指定しなければなりません。position:absoluteを指定しておけば横幅を指定しなくても大丈夫です。なお、Netscape6はブラウザの仕様(?)で初期値を1にして表示状態にすると透明処理が実行できません。

ここからスクリプトをファイルに保存して、<HEAD>～</HEAD>内に記述してスクリプトを読み込ませます。

スクリプトは<BODY>のonload属性で実行します。

jQueryで処理する方法

今となってはjQueryを使えばサラッと簡単に実装できます。まず以下のようにしてjQueryを読み込ませてください。あとはIDならば#ID名、CLASSならば.CLASS名を指定してjQueryのFade In機能を呼び出すだけです。例えばID="fadeinfadeout"を1000ミリ秒でフェードイン、同じく1000ミリ秒でフェードアウト処理を行なうならば、<HEAD>～</HEAD>内に以下のような記述を行ないます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function fadeInOut() {
	$('#fadeinfadeout').fadeTo(1000,1).fadeTo(1000,0.01);
	setTimeout("fadeInOut()",2100);
}
$(function(){
	fadeInOut();
});
</script>

フェードイン・フェードアウト

setTimeoutで2000ではなく2100を指定しているのは、処理がきっちり2000ミリ秒で終わらなかったら困るので余裕をもたせているからです。