Javascript 为什么我的预加载动画在预加载完成后继续显示在我的网站上？

为什么我的预加载动画在预加载动画完成和我的网站启动后继续显示在我的网站上

我只希望预加载的动画在指定的秒数内显示，并且在我的网站启动时不会继续。只是确认一下，我想在我的活动网站启动后删除预加载动画。我只希望动画在指定的时间内出现，当网站启动时，我不想看到它。我怎样才能删除这个

这是一个在JSFIDLE中加载到我的网站的动画的当前外观示例，这是我想要删除的内容，并且只有在网站启动之前才有预加载动画

我相信问题在于我的html。我有两套

标签，因为预加载的页面与我的网站是分开的。这是否会混淆这个过程，并导致预加载动画在启动时带到我的实际站点

---

请注意

splash

div

表示开始时显示几秒钟的网页

应用程序

div

代表我的实际网站

这就是我想要的，在我的网站发布后，删除这个带有文本和黑色背景的预装动画部分

我希望我的网站在预装动画完成后启动时看起来像这样

---

这是因为您已将

.splash

设置为该div的

类

，并试图获取

文档。getElementById（'splash'）

，顾名思义，它通过

id

属性获取元素，这就是为什么它会给您一个错误。只需将

class

属性更改为

id

，或将

js

更改为-

document.getElementsByClassName('splash')[0]

我已经在您的代码中使用

id

-

//jQuery在滚动时折叠导航栏
$（窗口）。滚动（函数（）{
如果（$（“.navbar”）.offset（）.top>50）{
$（“.navbar固定顶部”）.addClass（“顶部导航折叠”）；
}否则{
$（“.navbar固定顶部”）.removeClass（“顶部导航折叠”）；
}
});
//页面滚动功能的jQuery-需要jQuery插件
$（函数（）{
$（文档）。在（'click'，'a.page-scroll'，函数（事件）{
var$anchor=$（此）；
$（'html，body'）.stop（）.animate({
scrollTop:$（$anchor.attr（'href'））.offset（）.top
}，1500年，“easeInOutExpo”）；
event.preventDefault（）；
});
});
正文{
背景：#333；
背景：-webkit梯度（径向，中心，120，中心，900，从（#111）到（#111））；
背景：-莫兹径向梯度（圆形，#111，#111）；
}
#应用程序{
显示：无；
}
#飞溅{
利润率：200px自动；
}
h1{
字体系列：“演员”，无衬线；
颜色：#FFF；
字体大小：16px；
字母间距：1px；
字号：200；
文本对齐：居中；
}
#飞溅范围{
宽度：16px；
高度：16px；
边界半径：50%；
显示：内联块；
位置：绝对位置；
左：50%；
左边距：-10px；
-webkit动画：3s无限线性；
-moz动画：3s无限线性；
-o动画：3s无限线性；
}
#飞溅范围：第n个孩子（2）{
背景：蓝色；
-webkit动画：kiri 1.2s无限线性；
-moz动画：kiri 1.2s无限线性；
-o动画：kiri 1.2s无限线性；
}
#飞溅范围：第n个孩子（3）{
背景：红色；
z指数：100；
}
#飞溅范围：第n个孩子（4）{
背景：红色；
-webkit动画：kanan 1.2s无限线性；
-moz动画：kanan 1.2s无限线性；
-o-动画：kanan 1.2s无限线性；
}
@-webkit关键帧kanan{
0%{-webkit转换：translateX（20px）；
}
50%{-webkit转换：translateX（-20px）；
}
100%{-webkit转换：translateX（20px）；
z指数：200；
}
}
@-moz关键帧kanan{
0%{-moz变换：translateX（20px）；
}
50%{-moz变换：translateX（-20px）；
}
100%{-moz变换：translateX（20px）；
z指数：200；
}
}
@-o-关键帧kanan{
0%{-o变换：translateX（20px）；
}
50%{-o-变换：translateX（-20px）；
}
100%{-o变换：translateX（20px）；
z指数：200；
}
}
@-webkit关键帧kiri{
0%{-webkit转换：translateX（-20px）；
z指数：200；
}
50%{-webkit转换：translateX（20px）；
}
100%{-webkit转换：translateX（-20px）；
}
}
@-莫兹关键帧基里{
0%{-moz变换：translateX（-20px）；
z指数：200；
}
50%{-moz变换：translateX（20px）；
}
100%{-moz变换：translateX（-20px）；
}
}
@-o-关键帧kiri{
0%{-o变换：translateX（-20px）；
z指数：200；
}
50%{-o变换：translateX（20px）；
}
100%{-o变换：translateX（-20px）；
}
}
身体{
宽度：100%；
身高：100%；
}
html，正文{
宽度：100%；
身高：100%；
}
@介质（最小宽度：767px）{
navbar先生{
填充：10px0；
-webkit过渡：背景。1s缓进缓出，填充。5s缓进缓出；
-moz过渡：背景。1s缓进缓出，填充。5s缓进缓出；
过渡：背景。1缓进缓出，填充。1缓进缓出；
//背景色：透明；
背景色：白色；
}
.顶部导航崩溃{
填充：0；
}
}
.nav.navbar-nav li a{
颜色：黑色；
}
.navbar品牌>img{
最大高度：100%；
身高：100%；
宽度：自动；
保证金：0自动；
}
.导言部分{
身高：100%；
填充顶部：70px；
文本对齐：居中；
最小高度：自动；
背景：#333；
}
.main 1{
颜色：#FFFFFF；
字体系列：“Helvetica”；
字体大小：粗体；
字号：2em
}
.关于部分{
身高：100%；
填充顶部：150px；
文本对齐：居中；
背景：#eee；
}
.联络组{
身高：100%；
填充顶部：150px；
文本对齐：居中；
返回