预加载器不会消失
Preloader doesn't disappear
嘿,我正在尝试将预加载器添加到我的网站,但无论我做什么,它都不会消失或停留在页面上方或类似的东西。我尝试了很多东西,但没有任何效果,即使我尝试复制应该可以工作的相同代码。
// Attempt 1
$(document).ready(function () {
$(".loader").fadeOut("slow");
});
// Attempt 2
// setTimeout(function () {
// $(".loader").fadeToggle();
// }, 3000);
.loader {
background: #111;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: 1;
}
.loader div {
background: #fff;
width: 16px;
height: 32px;
margin-left: 10px;
animation: loader 1.2s infinite;
}
@keyframes loader {
50% {
height: 64px;
}
}
.loader div:nth-child(1) {
background: #ff9f1a;
animation-delay: -0.4s;
}
.loader div:nth-child(2) {
background: #fed330;
animation-delay: -0.2s;
}
.loader div:nth-child(3) {
background: #fffa65;
animation-delay: 0s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loader">
<div></div>
<div></div>
<div></div>
</div>
jQuery 库的精简版没有 fadeOut
函数。
嘿,我正在尝试将预加载器添加到我的网站,但无论我做什么,它都不会消失或停留在页面上方或类似的东西。我尝试了很多东西,但没有任何效果,即使我尝试复制应该可以工作的相同代码。
// Attempt 1
$(document).ready(function () {
$(".loader").fadeOut("slow");
});
// Attempt 2
// setTimeout(function () {
// $(".loader").fadeToggle();
// }, 3000);
.loader {
background: #111;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: 1;
}
.loader div {
background: #fff;
width: 16px;
height: 32px;
margin-left: 10px;
animation: loader 1.2s infinite;
}
@keyframes loader {
50% {
height: 64px;
}
}
.loader div:nth-child(1) {
background: #ff9f1a;
animation-delay: -0.4s;
}
.loader div:nth-child(2) {
background: #fed330;
animation-delay: -0.2s;
}
.loader div:nth-child(3) {
background: #fffa65;
animation-delay: 0s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loader">
<div></div>
<div></div>
<div></div>
</div>
jQuery 库的精简版没有 fadeOut
函数。