Codeschnipsel - Div Box Fadeout/Ausblenden
Heute zeige ich euch, wie man nach einer gewissen Zeit, eine Div-Box ausblenden (Fade Off) und anschließend deaktivieren lässt.
Das eigentliche Javascript (P91Fadeout.js):
Code:/* ########################################################################################################################### # P91Fadeout V.0.9 by PA-S.de ########################################################################################################################### # P91Fadeout V.0.9 by PA-S.de # Copyright 2008 PA-S.de # Dieser unsichtbare Verweis, darf nicht entfernt werden ########################################################################################################################### */ function P91Fadeout(id, geschwindigkeit) { var fps = Math.round(geschwindigkeit / 100); var tmp = 0; for(i = 100; i >= 0; i--) { setTimeout("P91Fadeout_fade('" + id + "'," + i + ")", (tmp * fps)); tmp++; } } function P91Fadeout_fade(id, pas) { var heurix = document.getElementById(id).style; if(pas > 0) { heurix.opacity = (pas / 100); heurix.MozOpacity = (pas / 100); heurix.KhtmlOpacity = (pas / 100); heurix.filter = "alpha(opacity=" + pas + ")"; } else { heurix.display = "none"; } }
Die eigentliche Einbindung und Einleitung des Prozesses (im HEAD-Bereich):
Code:<script src="P91Fadeout.js" type="text/javascript"></script> <script type="text/javascript"> // Erläuterung: // window.setTimeout("P91Fadeout('DIV-ID', GESCHWINDIGKEIT_MILISEK)", TIMER_MILISEK); window.setTimeout("P91Fadeout('box', 2000)", 5000); </script>
Das auszublendende Element:
Code:<div id="box"> Diese Box blendet sich in 5 Sekunden aus und verschwindet :-D. </div>
Komplettes Beispiel einer Div-Seite (div-box-fadeout.html):
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Div Box Fadeout Javscript</title> <style type="text/css"> <!-- body,a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; } body { background-color: #CCCCCC; } --> </style> <script src="P91Fadeout.js" type="text/javascript"></script> <script type="text/javascript"> // Erläuterung: // window.setTimeout("P91Fadeout('DIV-ID', GESCHWINDIGKEIT_MILISEK)", TIMER_MILISEK); window.setTimeout("P91Fadeout('box', 2000)", 5000); </script> </head> <body> <div style="margin-left:20px"> <h3>P91Fadeout</h3> <!-- Die eigentliche Box die angesteuert werden soll mit der id="box" --> <div id="box" style="width: 300px; background-color:#efefef; border: 1px solid #000000; padding: 10px; text-align:justify; color:#FF0000"> Diese Box blendet sich in 5 Sekunden aus und verschwindet :-D. </div> <!-- --> <p><a href="div-box-fadeout.html" title="Nochmal">Nochmal anzeigen >> </a></p> <p>by <a href="http://www.pa-s.de" title="Scripts and more">PA-S.de</a> </p> </div> </body> </html>
Download aller Dateien: Hier klicken!
Demonstration: Hier klicken!