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

看板Web_Design作者 (我行我素 我型我塑)時間9年前 (2016/06/26 01:26), 編輯推噓3(3021)
留言24則, 5人參與, 最新討論串1/1
新手提問~ 目前我已經用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

06/26 08:10, , 1F
setInterval
06/26 08:10, 1F

06/26 11:01, , 2F
Interval是間隔耶 要也是settimeout
06/26 11:01, 2F

06/26 12:40, , 3F
我的話大概會setTimeout(function () {
06/26 12:40, 3F

06/26 12:41, , 4F
document.getElementById("DIV的ID").classList.add("透明
06/26 12:41, 4F

06/26 12:41, , 5F
度0的class");
06/26 12:41, 5F

06/26 12:42, , 6F
setTimeout(function() {
06/26 12:42, 6F

06/26 12:42, , 7F
document.getElementById("DIV的ID").remove();
06/26 12:42, 7F

06/26 12:43, , 8F
), 淡出動畫的秒數);
06/26 12:43, 8F

06/26 12:43, , 9F
})
06/26 12:43, 9F

06/26 12:43, , 10F
第1行setTimeout我打錯orz,應該要丟在載入完成的callback
06/26 12:43, 10F

06/26 12:43, , 11F
裡面才對
06/26 12:43, 11F

06/26 12:44, , 12F
然後div本身的css加上transition秒數(會變成淡出的秒數)
06/26 12:44, 12F

06/26 12:44, , 13F
再增設一個{opacity: 0;}的class
06/26 12:44, 13F

06/26 13:52, , 14F
我是想說Interval把opacity調一調就好了
06/26 13:52, 14F

06/26 14:36, , 15F
感謝樓上各位大大指點方向 :)
06/26 14:36, 15F

06/26 14:48, , 16F
感謝Hevak,寫的好詳細,我研究看看,對一些語法還不是很
06/26 14:48, 16F

06/26 14:48, , 17F
熟~
06/26 14:48, 17F

06/26 15:15, , 18F
pm2001主要講的點是一次性的東西用setTimeout,重複性的才
06/26 15:15, 18F

06/26 15:15, , 19F
用setInterval
06/26 15:15, 19F

06/26 15:33, , 20F
對了,如果有jQuery,可以直接用fadeOut()就好,比這樣寫
06/26 15:33, 20F

06/26 15:33, , 21F
簡單得多....
06/26 15:33, 21F

06/26 15:33, , 22F
jQuery fadeOut()的場合連css class都不用另外寫
06/26 15:33, 22F

06/26 21:40, , 23F
後來試著用jQuery做,超快的~感謝!
06/26 21:40, 23F

07/01 09:29, , 24F
會 three.js 不會淡出 0.0
07/01 09:29, 24F
文章代碼(AID): #1NRhxSI_ (Web_Design)
文章代碼(AID): #1NRhxSI_ (Web_Design)