twitter ■お問い合わせ ■当サイトへのリンク ■サイト仕様 ■

現在位置 > LostTechnology > JavaScript > Fade In

Fade In

この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

Click! 実際にフェードインを見てみる

<DIV id="fadein" style="width:100%; filter:alpha(Opacity=0); -moz-opacity:0;">

ID名は自由ですが、スクリプトの実行時に必ず指定したID名を使用してください。上の記述例では初期値は完全な透明にしてありますが、alpha(Opacity=30); -moz-opacity:0.3;として30%から開始にしても問題はありません。サンプルはDIV要素を対象にしていますが、これはInternet Explorer 4.0がBODY要素とDIV要素でしか処理できないという制約のためです。なお、Netscapeはブラウザの仕様でBODY要素には適用できません。

Internet ExplorerはVisual Filerを使うので、BODY以外の要素に使う場合は<DIV>内で指定してください。また、必ずstyle属性でwidth(横幅)を指定しなければなりません。position:absoluteを指定しておけば横幅を指定しなくても大丈夫です。

<SCRIPT type="text/javascript" src="script/fadein.js"></SCRIPT>

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

<BODY onload="fadin('fadein',100);">

ページ表示時に処理を行ないたいならばBODY要素のonload属性で実行します。クリックなどで処理を行なうのであればonclickなどを利用しましょう。呼び出しには、処理したい要素のID名と処理間隔を指定してください。

このページのサンプルでは繰り返し実行するために紹介した方法とは異なる記述での処理になっています。ソースを表示して確認する方はその点にご注意を。

jQueryで処理する方法

今となってはjQueryを使えばサラッと簡単に実装できます。まずjQueryを読み込ませてください。あとはIDならば#ID名、CLASSならば.CLASS名を指定してjQueryのFade In機能を呼び出すだけです。例えばID="fadein"を500ミリ秒で処理を行なうならば以下のように記述します

$("#fadein").fadeIn(500);

実際に試してみる場合にはここをクリックしてください。

onclickで実行するならばonclick="$('#fadein').fadeIn(500)"と記述すればOKです。ページ表示時に実行するならば、<HEAD>～</HEAD>内に以下のような記述を行ないます。