div Container automatisch einblenden nach x Sekunden

stedoo · 26. Januar 2013, 18:00

Hallo,

ich brauche einen div Container der nach x Sekunden automatisch sanft (mit fadeIn ?) eingeblendet wird. Diese div Container, sollte man dann aber über einen Link wieder sanft (mit fadeOut ?) ausgeblendet werden können.

Kann mir da evtl. jemand weiterhelfen?

Gruß

JaffaCoder · 26. Januar 2013, 19:36

Hey,

für solche Animationen eignet sich jQuery hervorragend.

jquery.com/

Quellcode

$(document).ready(function(){
$('#divID').delay(1000).fadeIn(250).delay(5000).fadeOut(250);
});

Hier müsstest du dem Container per CSS display: none; verpassen. Dann wird beim Seitenaufruf $(document).ready() (Wenn alle Bilder und Javascripte geladen sind) zuerst 1000 Millisekunden gewartet, dann der Container eingeblendet, was 250 Millisekunden dauert, nach 5000 Millisekunden wird er wieder ausgeblendet, was wieder 250 MIllisekunden dauert.

stedoo · 26. Januar 2013, 21:38

Hi,

super. Vielen Dank.

Ich möchte den Container aber gerne über einen Button/Link wieder ausblenden lassen. Wie gehe ich da vor?

Gruß

Bodo06 · 27. Januar 2013, 10:21

Moin!

Indem du das fadeOut auf den Button bindest.

Quellcode

$(document).ready(function(){
$('#divID').delay(1000).fadeIn(250);
$('#buttonID').fadeOut(250);
})

Happy Coding!
Bodo06

JaffaCoder · 27. Januar 2013, 14:20

Meinst du so, dass du auf einen Button drückst und er dann eingeblendet wird und dann wieder verschwindet?

Quellcode

$(document).ready(function(){
$('#buttonId').click(function(){
$('#containerId').fadeIn(1000).delay(1000).fadeOut(1000);
});
});

stedoo · 27. Januar 2013, 18:01

Danke für Eure Hilfe.

@JaffaCoder
Ich meinte die Lösung von Bodo06

Gruß

div Container automatisch einblenden nach x Sekunden

div Container automatisch einblenden nach x Sekunden

Quellcode

Quellcode

Quellcode

Teilen

Benutzer online 3

Tags