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 &gt;&gt; </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!

Beachten Sie: Wir übernehmen keinerlei Haftung für irgendwelche Schäden, Ausfälle oder sonstigen Geschehnissen.
Alle Angaben sind ohne Gewähr, Sie handeln auf eigenes Risiko!
Alle genannten Soft- und Hardwarebezeichnungen sowie Markennamen sind Eigentum ihrer jeweiligen Inhaber und unterliegen im Allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz.
Alle Rechte vorbehalten