Ich würde je nach benötigtem Inhalt des Layers auch über eine Lösung mit css3 und animation nachdenken. Zumindestens dann, wenn Du auf alte Browser keine Rücksicht nehmen musst, sonst ggf. mit Fallback.
Hier ein kleines Beispiel des Funktionsprinzips - Die Animation selbst kann man natürlich noch mannigfaltig verfeinern.
HTML-Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fade Out Layer</title>
<style type="text/css">
@-webkit-keyframes fade {
0% {
opacity: 1;
height: 100%;
width: 100%;
}
100% {
opacity: 0;
height: 0;
width: 0;
}
}
@-moz-keyframes fade {
0% {
opacity: 1;
height: 100%;
width: 100%;
}
100% {
opacity: 0;
height: 0;
width: 0;
}
}
@keyframes fade {
0% {
opacity: 1;
height: 100%;
width: 100%;
}
100% {
opacity: 0;
height: 0;
width: 0;
}
}
body {
}
#wrapper {
min-height: 500px;
background-color: red;
}
body:before {
position: absolute;
opacity: 0;
height: 0;
width: 0;
background-color: green;
color: black;
content: "Das ist der Layer";
-webkit-animation: fade 4s ease 1;
-moz-animation: fade 4s ease 1;
animation: fade 4s ease 1;
}
</style>
</head>
<body>
<div id="wrapper">Das ist der normale Inhalt</div>
</body>
</html>
Guten Rutsch ins neue Jahr
Lesezeichen