作者iceleaf (我行我素 我型我塑)
看板Web_Design
標題[問題] 如何設定進入網頁幾秒後移除一塊div
時間Sun Jun 26 01:26:48 2016
新手提問~
目前我已經用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://webptt.com/m.aspx?n=bbs/Web_Design/M.1466875612.A.4BF.html
1F：推 oToToT: setInterval 06/26 08:10
2F：推 pm2001: Interval是間隔耶 要也是settimeout 06/26 11:01
3F：→ Hevak: 我的話大概會setTimeout(function () { 06/26 12:40
4F：→ Hevak: document.getElementById("DIV的ID").classList.add("透明 06/26 12:41
5F：→ Hevak: 度0的class"); 06/26 12:41
6F：→ Hevak: setTimeout(function() { 06/26 12:42
7F：→ Hevak: document.getElementById("DIV的ID").remove(); 06/26 12:42
8F：→ Hevak: ), 淡出動畫的秒數); 06/26 12:43
9F：→ Hevak: }) 06/26 12:43
10F：→ Hevak: 第1行setTimeout我打錯orz，應該要丟在載入完成的callback 06/26 12:43
11F：→ Hevak: 裡面才對 06/26 12:43
12F：→ Hevak: 然後div本身的css加上transition秒數（會變成淡出的秒數） 06/26 12:44
13F：→ Hevak: 再增設一個{opacity: 0;}的class 06/26 12:44
14F：推 oToToT: 我是想說Interval把opacity調一調就好了 06/26 13:52
15F：→ iceleaf: 感謝樓上各位大大指點方向 :) 06/26 14:36
16F：→ iceleaf: 感謝Hevak，寫的好詳細，我研究看看，對一些語法還不是很 06/26 14:48
17F：→ iceleaf: 熟～ 06/26 14:48
18F：→ Hevak: pm2001主要講的點是一次性的東西用setTimeout，重複性的才 06/26 15:15
19F：→ Hevak: 用setInterval 06/26 15:15
20F：→ Hevak: 對了，如果有jQuery，可以直接用fadeOut()就好，比這樣寫 06/26 15:33
21F：→ Hevak: 簡單得多.... 06/26 15:33
22F：→ Hevak: jQuery fadeOut()的場合連css class都不用另外寫 06/26 15:33
23F：→ iceleaf: 後來試著用jQuery做，超快的～感謝！ 06/26 21:40
24F：→ xdraculax: 會 three.js 不會淡出 0.0 07/01 09:29