作者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/cn.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