Simples Beispiel, schnell hergecodet, funktioniert im FF:
<html>
<head>
<title>Fadeout</title>
<script type="text/javascript">
var opacity = 0.0;
var timeout = 10;
function fade_out() {
var fader = document.getElementById("fader");
fader.style.width = window.innerWidth + "px";
fader.style.height = window.innerHeight + "px";
window.setTimeout( "darken()", timeout );
}
function darken() {
var fader = document.getElementById("fader");
if( opacity < 0.6 )
opacity += 0.1;
else
return;
fader.style.opacity = opacity;
window.setTimeout( "darken()", timeout );
}
</script>
</head>
<body>
<div style="text-align: center">Text Text Text</div>
<input type="button" onclick="fade_out()" value="click me!">
<div id="fader" style="background-color: black; position: absolute; height: 0px; width: 0px; top: 0px; left: 0px; z-index: 100; opacity: 0;"></div>
</body>
</html>
Der IE kennt die CSS3 Eigenschaft "opacity" noch nicht, deswegen funktioniert es da nicht. Dafür kennt er die proprietäre Eigenschaft "filter( opacity=0..100)" - sollte sich also auch realisieren lassen. Im schlimmsten Falle kannst auch einfach ein animiertes GIF mit dem Fadeout als Hintergrundbild reinstellen, das sollte dann wirklich überall funktionieren.
