div-Element zeitverzögert nach Seiteladen anzeigen

[mangodrone]

Guten Tag

Kurz Zur Problemstellung: Auf einer Seite läuft im Hintergrund ein Flash und darüber sind div-Elemente. Nun soll beim Seiteladen die Animation im Hintergrund zuerst angezeigt werden (wie bis jetzt) und erst danach (zeitverzögert, z.b. nach 10sec) die div-Elemente darüber erscheinen.

Da ich leider (noch) kein JavaScript kann, versuchte ich das im WWW zu finden und schusterte ein paar Codes zusammen mit setTimeout und/oder jquery. Doch alle Versuche scheiterten kläglich bei dem das div ausgeblendet, eingeblendet und gleich wieder ausgeblendet, einfach angezeigt oder gar nicht angezeigt wird.

CSS:
#test {
position:absolute;
top:60px;
left:170px;
color:white;
font-size:15px;
font-family: times;
text-decoration:none;
}
.hidden {
position: absolute;
top: -10000px;
}

HTML:
<div id="test">TEXT</div>

JAVASCRIPT Bsp. Versuch 1 (mit jquery):
$(document).ready(function(){
$("#test:hidden:first").fadeIn("slow");
});
PROBLEM: Das div wird einfach angezeigt.

JAVASCRIPT Versuch 2 (mit jquery):
$(document).ready(function(){
$("#test").addClass("hidden").fadeTo(3000, 0, function(){
$(this).removeClass("hidden")
}).fadeTo("slow", 1).fadeTo(3000, 1).fadeTo("slow", 0);
});
PROBLEM: Das div wird ein, aus, ein und wieder ausgeblendet. - Habs nicht geschafft dies umzukehren und nur einen Durchlauf zu machen...

Vielen Dank für die Hilfe
Gruss
mangodrone

[LX]

Ein Hinweis zuvor: Du solltest das div vielleicht nicht mittels CSS verstecken, da es sonst ohne JavaScript gar nicht sichtbar ist. Dann musst Du als nächstes verstehen, wie Du die Animationen sauber hintereinander ausführst (jeweils im Callback der vorherigen Animation).

Gruß, LX

[Malcolm Beck´s]

hi,

Ein Hinweis zuvor: Du solltest das div vielleicht nicht mittels CSS verstecken, da es sonst ohne JavaScript gar nicht sichtbar ist.

Rein zufällig diskutieren wir weiter unten genau dieses Problem.
Die Lösung findet sich hier.

@mangodrone
Du kannst dich gerne der Diskussion anschliessen.

mfg

[mangodrone]

Rein zufällig diskutieren wir weiter unten genau dieses Problem.
Die Lösung findet sich hier.

Ausgezeichnet! Vielen Dank, es hat mit dem Tipp funktioniert.

JAVASCRIPT:
$(document).ready(function(){
$("#test").css("display","none");
setTimeout(function()
{
$("#test").fadeIn(1000);
}, 10000);
});

Gruss
mangodrone