2016-04-03 25 views
0

Ich habe eine div, die ich es von der rechten Seite des Bildschirms 1 oder 2 Sekunden nach dem Ende der Seite geladen werden soll.automatisch div auf Seite laden

Es scheint, dass ich das ohne die Klick-Funktion nicht erreichen kann. Wie kann ich das schaffen?

+0

'setTimeout()'? –

+0

Hier ist Ihre [Antwort] (http://stackoverflow.com/a/12638711/3162554). – Marvin

+0

Vielen Dank für den Link Marvin! Hat einer Tonne geholfen! – BlueBird03

Antwort

0

Working jsFiddle

eine Rückruffunktion für Seitenlade hinzufügen:

<body onload="script();"> 

dann die Funktion hinzufügen:

function script(){ 
    setTimeout(function(){ 
     document.getElementById('elementToMove').style.left = '1000px'; // new left position is 1000px in this example 
    }, 2000); // 2000 = 2 seconds after page load 
} 

Und vergessen Sie nicht CSS3 Übergang zu schaffen, die Gleitwirkung hinzufügen

#elementToMove{ 
    -webkit-transition: left 1s ease; 
    transition: left 1s ease; 
} 
+0

Vielen Dank, aber ich bleibe bei der CSS3-Option, die hier zur Verfügung gestellt wurde: http://StackOverflow.com/questions/6805482/Css3-Transition-Animation-on-load/12638711#12638711 – BlueBird03

+0

Sie können bei jedem CSS-Übergang bleiben Sie mögen das ist nicht der kritische Teil Ihrer Frage ... Beachten Sie, dass ich getElementByID zu getElementById korrigiert habe. Sieh dir das beigefügte jsFiddle an. Das Problem mit CSS-Verzögerungen ist, dass die Seite möglicherweise noch nicht geladen wurde. Mit der Ladefunktion von javascript können Sie sicher sein, dass die Seite 2 Sekunden lang vollständig angezeigt wird, bevor Sie die Animation starten. –

+0

Vielen Dank für die ausführliche Antwort! – BlueBird03