文字をフェードイン/フェードアウトする


動作ブラウザ 【 IE:4.0  NN:-
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows - - -
Macintosh - - -
UNIX - - - - - - - -
Dreamcast - - - - - - - - - - -

ポイント document.all["strID"].filters["alpha"].opacity = count+=2; if (count <= 100) setTimeout("strFade()",200); <body onLoad="strFade()" bgcolor="white"> <div id="strID" style="position:absolute;filter:alpha(opacity=0)">
説  明 Win版IE4以降ではフィルタ機能の透明度指定を使うことにより、より綺麗にフェードイン/フェードアウトさせることができます。「document.all[タグのID].filters["alpha"].opacity」に値(0〜100)を代入することで透明度を変えることができます。0で完全に透明、100で完全に不透明になります。
サンプル <html> <head> <title>文字をフェードイン/フェードアウトする</title> <script Language="JavaScript"><!-- count = 0; function strFade() { document.all["strID"].filters["alpha"].opacity = count+=2; if (count <= 100) setTimeout("strFade()",200); } // --></script> </head> <body onLoad="strFade()" bgcolor="white"> <div id="strID" style="position:absolute;filter:alpha(opacity=0)">文字をフェードインさせます。</div> </body> </html>
補足説明 なし

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!

写真素材 PIXTA