[問題] 如何設定進入網頁幾秒後移除一塊div

[iceleaf (我行我素 我型我塑)]

新手提問~

目前我已經用three.js架好一個3D場景，放在一個div內 z-index設為1，
另一個div用來跑進度條動畫，z-index設為2，
主要是因為載入3D場景需要一段時間，
這段時間會用z-index:2的這個div擋住後面場景，

如下圖(左上是進度條)：
https://www.dropbox.com/s/f6uqfloi8j8ri6t/2016-06-26_011158.jpg?dl=0

想請問動畫完成後，怎麼移除這個div，希望能有淡出效果。

還想請問有沒有推薦好的範例書，目前自學中，網路上比較難找到系統性的教學，
麻煩版上為我解惑，感激不盡.....

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.251.52.39
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1466875612.A.4BF.html
推 oToToT: setInterval
推 pm2001: Interval是間隔耶 要也是settimeout
→ Hevak: 我的話大概會setTimeout(function () {
→ Hevak: document.getElementById("DIV的ID").classList.add("透明
→ Hevak: 度0的class");
→ Hevak:      setTimeout(function() {
→ Hevak:         document.getElementById("DIV的ID").remove();
→ Hevak:      ), 淡出動畫的秒數);
→ Hevak: })
→ Hevak: 第1行setTimeout我打錯orz，應該要丟在載入完成的callback
→ Hevak: 裡面才對
→ Hevak: 然後div本身的css加上transition秒數（會變成淡出的秒數）
→ Hevak: 再增設一個{opacity: 0;}的class
推 oToToT: 我是想說Interval把opacity調一調就好了
→ iceleaf: 感謝樓上各位大大指點方向 :)
→ iceleaf: 感謝Hevak，寫的好詳細，我研究看看，對一些語法還不是很
→ iceleaf: 熟～
→ Hevak: pm2001主要講的點是一次性的東西用setTimeout，重複性的才
→ Hevak: 用setInterval
→ Hevak: 對了，如果有jQuery，可以直接用fadeOut()就好，比這樣寫
→ Hevak: 簡單得多....
→ Hevak: jQuery fadeOut()的場合連css class都不用另外寫
→ iceleaf: 後來試著用jQuery做，超快的～感謝！
→ xdraculax: 會 three.js 不會淡出 0.0