如何等待一段時間纔在css中添加元素？ JavaScript的？

我有一個問題，我會解釋。我正在做一個HTML5和CSS3的動畫。我的想法是，一架飛機正在飛行，並在一段時間後發射導彈。我想要做的是讓導彈在那之後出現。我想過在一段時間（任何時候我選擇）使用javascript改變我的div的z-Index屬性（因爲我將導彈圖像轉換爲div容器）。爲了做到這一點，我在底部找到了睡眠功能。我創建了「出現」函數，我知道它的工作原理，因爲它改變了我的zIndex值，但它不會等待我想要的2秒鐘。如何等待一段時間纔在css中添加元素？ JavaScript的？

我也認爲我通過使用可見性屬性的解決方案，但我有同樣的問題，睡眠功能根本不等待。

有什麼建議嗎？由於

function sleep(milliseconds) { 
     var start = new Date().getTime(); 
     for (var i = 0; i < 1e7; i++) { 
     if ((new Date().getTime() - start) > milliseconds){ 
      break; 
     } 
     } 
    } 

    function appear(object){ 

    sleep(200000); 
    var objective = document.getElementById(object); 

    objective.style.zIndex=1;

來源

2013-03-26 antonbalboa

可以傳遞到setTimeout功能，將調用該函數在x毫秒的功能。

function waitForMe() { 
    alert('triggered!'); 
} 

// Call waitForMe in 200000ms 
setTimeout(waitForMe, 200000);

因此，對於你的榜樣，你會想用2000（2秒），而不是200000（200秒）：

function appear(object) { 
    setTimeout(function() { 
     var objective = document.getElementById(object); 
     objective.style.zIndex=1; 
    }, 2000); 
}

隱藏和顯示元素

你可以以幾種方式隱藏和顯示方法：

使用z-index正如你所建議的，可能不是最好的方式，因爲我們實際上可以隱藏它，而不是將它發送到頁面的後面。
```
objective.style.zIndex = 1; 
```

使用display，這完全隱藏的對象。

// hide 
objective.style.display = 'none'; 
// show 
objective.style.display = 'block';

使用visibility，這將隱藏對象，但它仍然會佔用空間的頁面。如果您使用的是position:fixed或position:absolute，則無關緊要。
```
// hide 
objective.style.visibility = 'hidden'; 
// show 
objective.style.visibility = 'visible'; 
```

來源

2013-03-26 01:05:56

您可以創建圍繞目標一個div，並與JavaScript的它添加在這樣

document.getElementById('objectivespan').innerHTML=imagehere;

除此之外，您可以使用

objective.style.visibility='hidden';

和將其更改爲 objective.style.visibility ='visible';

的延遲，使用

function sleep(){ 
     alert('slept'); 
    } 
    SetTimeout('sleep', 10000);

來源

2013-03-26 01:07:07 scrblnrd3

如何等待一段時間纔在css中添加元素？ JavaScript的？

回答

相關問題