2016-04-03 12 views
0

ページの読み込みが完了してから1〜2秒後に画面の右からスライドしたいdivがあります。ページの読み込み時にdiv内で自動的にスライドする

クリック機能を使用しないとこれを達成できないようです。どうすればこの作品を作れますか?

+0

'setTimeout()'? –

+0

あなたの[答え](http://stackoverflow.com/a/12638711/3162554)です。 – Marvin

+0

ありがとう、マーヴィンのリンク!助けたトン! – BlueBird03

答えて

0

Working jsFiddle

ページのロード用のコールバック関数を追加します。

<body onload="script();"> 

を、関数追加:

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 
} 

をスライド効果を作成するために、CSS3のトランジションを追加することを忘れないでください

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

ありがとうございますが、ここで提供されていたCSS3オプションに固執します:http://stackoverflow.com/questions/6805482/css3-transition-animation-on-load/12638711#12638711 – BlueBird03

+0

CSSの移行これはあなたの質問の重要な部分ではないと思います...私はgetElementByIDをgetElementByIDに修正しました。添付のjsFiddleを見てください。 CSS遅延の問題は、ページがまだロードされていない可能性があることです。 javascriptのロード機能を使用すると、アニメーションを開始する前にページが2秒間完全に表示されていることがわかります –

+0

正直な回答ありがとうございます! – BlueBird03