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