运行 css 预加载器 jquery 后的动画
Run css animation after jquery preloader
我在网站上工作,我在英雄横幅中有一个动画。
但是,还有一个 Jquery 预加载器。
如果我使用我以前的代码(见下文),css 动画开始发生,同时预加载器在这里,所以根据你的 wifi,你可能只会看到它的结尾。
// Preloader
$(window).on('load', function (event) {
$('.preloader').delay(1200).fadeOut(500);
});
html, body {
font-family: 'Montserrat', sans-serif;
margin: 0;
width: 100%;
height: 100%;
}
.text-center {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.animated-text {
font-size: calc(8px + 2vw);
line-height: 45px;
}
.animated-text a {
color: #666;
text-decoration: none;
flex-grow: 2;
}
.animated-text .entering {
color: #fff;
opacity: 0;
font-size: calc(12px + 4vw);
font-weight: 800;
animation: text2 2.5s 1 ease-out;
animation-delay: 2.9s;
-webkit-animation-delay: 2.9s;
animation-fill-mode: forwards;
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
.animated-text span {
display: inline-block;
vertical-align: middle;
font-size: calc(10px + 2.8vw);
font-weight: 300;
transform: scale(0);
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
.animated-text span:nth-of-type(1) {
animation: color 0.5s 1;
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(2) {
animation: color 0.5s 1;
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(3) {
animation: color 0.5s 1;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(4) {
animation: color 0.5s 1;
animation-delay: 0.7;
-webkit-animation-delay: 0.7s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(5) {
animation: color 0.5s 1;
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(6) {
animation: color 0.5s 1;
animation-delay: 1.1s;
-webkit-animation-delay: 1.1s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(7) {
animation: color 0.5s 1;
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(8) {
animation: color 0.5s 1;
animation-delay: 1.3s;
-webkit-animation-delay: 1.3s;
margin-right: 8px;
margin-left: 8px;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(9) {
animation: color 0.5s 1;
animation-delay: 1.4s;
-webkit-animation-delay: 1.4s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(10) {
animation: color 0.5s 1;
animation-delay: 1.5s;
-webkit-animation-delay: 1.5s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(11) {
animation: color 0.5s 1;
animation-delay: 1.7s;
-webkit-animation-delay: 1.7s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(12) {
animation: color 0.5s 1;
animation-delay: 1.9s;
-webkit-animation-delay: 1.9s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(13) {
animation: color 0.5s 1;
animation-delay: 2.1s;
-webkit-animation-delay: 2.1s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(14) {
animation: color 0.5s 1;
animation-delay: 2.3s;
-webkit-animation-delay: 2.3s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(15) {
animation: color 0.5s 1;
animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
animation-fill-mode: forwards;
}
@keyframes color {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
color: #fff;
transform: scale(1);
}
}
@keyframes text2 {
from {
opacity: 0;
color: #fff;
transform: translateY(-50%);
}
to {
opacity: 1;
color: #fff;
transform: translateY(50%);
}
}
.hero-image {
/* Use "linear-gradient" to add a darken background effect to the image . This will make the text easier to read */
background-image: url("img/checkout.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* Set a specific height */
height: 100vh;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- **********************PRELOADER******************************************* -->
<div class="preloader">
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.19 52.93">
<defs>
<style>.cls-1.pepe{fill:#000000;}.cls-2.mojo{fill:#61bbbd;}</style>
</defs>
<path class="cls-1 pepe" d="M278,426.42a18.9,18.9,0,0,1-19.67,20.67c-9.92-.44-18-9.32-18-19.25V394.61a.37.37,0,0,1,.37-.37h7.83a.38.38,0,0,1,.37.37V428a10.54,10.54,0,0,0,10.5,10.59,10.33,10.33,0,1,0-3.71-20l-.08,0h-.09a.41.41,0,0,1-.41-.41v-8.07a.35.35,0,0,1,.29-.35,18.71,18.71,0,0,1,5.19-.34A18.94,18.94,0,0,1,278,426.42Z" transform="translate(-240.34 -394.19)"/>
<g class="petit-cercle">
<path class="cls-2 mojo" d="M259.21,424.12h-3.52a.57.57,0,0,0-.57.57v3.52a2.46,2.46,0,0,0,0,.28,4.08,4.08,0,0,0,4.22,3.8,4.13,4.13,0,0,0,3.94-4A4.09,4.09,0,0,0,259.21,424.12Z" transform="translate(-240.34 -394.19)"/>
</g>
<g class="grand-truc">
<path class="cls-2 mojo" d="M287.47,409.25a34,34,0,0,0-28.24-15.06,34.38,34.38,0,0,0-3.79.21.37.37,0,0,0-.32.36v7.9a.37.37,0,0,0,.43.36,25.21,25.21,0,0,1,3.68-.27A25.47,25.47,0,0,1,280.8,414.7a.37.37,0,0,0,.55.09l6-5.07A.36.36,0,0,0,287.47,409.25Z" transform="translate(-240.34 -394.19)"/>
</g>
</svg>
</div>
<!-- ************* image section with animation *************** -->
<div class="hero-image">
<div class="animated-text text-center">
<a href="#">
<span>B</span>
<span>e</span>
<span>c</span>
<span>o</span>
<span>m</span>
<span>e</span>
<span> </span>
<span>a</span>
<span> </span>
<span>m</span>
<span>e</span>
<span>m</span>
<span>b</span>
<span>e</span>
<span>r</span>
</a>
<div class="entering">
<h1>Enter the Bali world</h1>
</div>
</div>
</div>
并且如果我尝试 jQuery 文档就绪/或 Javascript windows onload 方法在预加载器之后呈现它。动画不再工作了。我在我的代码中没有看到任何建议或错误吗?
$(document).ready(function() {
$("#spanislas1").addClass("span1");
$("#spanislas2").addClass("span2");
$("#spanislas3").addClass("span3");
$("#spanislas4").addClass("span4");
$("#spanislas5").addClass("span5");
$("#spanislas6").addClass("span6");
$("#spanislas7").addClass("span7");
$("#spanislas8").addClass("span8");
$("#spanislas9").addClass("span9");
$("#spanislas10").addClass("span10");
$("#spanislas11").addClass("span11");
$("#spanislas12").addClass("span12");
$("#spanislas13").addClass("span13");
$("#spanislas14").addClass("span14");
$("#spanislas15").addClass("span15");
});
.span1 {
animation: color 0.5s 1;
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
animation-fill-mode: forwards;
}
.span2 {
animation: color 0.5s 1;
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
animation-fill-mode: forwards;
}
.span3 {
animation: color 0.5s 1;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.span4 {
animation: color 0.5s 1;
animation-delay: 0.7;
-webkit-animation-delay: 0.7s;
animation-fill-mode: forwards;
}
.span5 {
animation: color 0.5s 1;
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
animation-fill-mode: forwards;
}
.span6 {
animation: color 0.5s 1;
animation-delay: 1.1s;
-webkit-animation-delay: 1.1s;
animation-fill-mode: forwards;
}
.span7 {
animation: color 0.5s 1;
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
animation-fill-mode: forwards;
}
.span8 {
animation: color 0.5s 1;
animation-delay: 1.3s;
-webkit-animation-delay: 1.3s;
margin-right: 8px;
margin-left: 8px;
animation-fill-mode: forwards;
}
.span9 {
animation: color 0.5s 1;
animation-delay: 1.4s;
-webkit-animation-delay: 1.4s;
animation-fill-mode: forwards;
}
.span10 {
animation: color 0.5s 1;
animation-delay: 1.5s;
-webkit-animation-delay: 1.5s;
animation-fill-mode: forwards;
}
.span11 {
animation: color 0.5s 1;
animation-delay: 1.7s;
-webkit-animation-delay: 1.7s;
animation-fill-mode: forwards;
}
.span12 {
animation: color 0.5s 1;
animation-delay: 1.9s;
-webkit-animation-delay: 1.9s;
animation-fill-mode: forwards;
}
.span13 {
animation: color 0.5s 1;
animation-delay: 2.1s;
-webkit-animation-delay: 2.1s;
animation-fill-mode: forwards;
}
.span14 {
animation: color 0.5s 1;
animation-delay: 2.3s;
-webkit-animation-delay: 2.3s;
animation-fill-mode: forwards;
}
.span15 {
animation: color 0.5s 1;
animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
animation-fill-mode: forwards;
}
@keyframes color {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
color: #fff;
transform: scale(1);
}
}
@keyframes text2 {
from {
opacity: 0;
color: #fff;
transform: translateY(-50%);
}
to {
opacity: 1;
color: #fff;
transform: translateY(50%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hero-image">
<div class="animated-text text-center">
<a href="#">
<span id="spanislas1">B</span>
<span id="spanislas2">e</span>
<span id="spanislas3">c</span>
<span id="spanislas4">o</span>
<span id="spanislas5">m</span>
<span id="spanislas6">e</span>
<span id="spanislas7"> </span>
<span id="spanislas8">a</span>
<span id="spanislas9"> </span>
<span id="spanislas10">m</span>
<span id="spanislas11">e</span>
<span id="spanislas12">m</span>
<span id="spanislas13">b</span>
<span id="spanislas14">e</span>
<span id="spanislas15">r</span>
</a>
<div class="entering">
<h1>Enter the Bali world</h1>
</div>
</div>
</div>
因为有 1200 毫秒的延迟和 500 毫秒的淡出,您可以在应用 类 之前使用 1700 毫秒的超时:
$(document).ready(function() {
setTimeout(function(){
$("#spanislas1").addClass("span1");
$("#spanislas2").addClass("span2");
$("#spanislas3").addClass("span3");
$("#spanislas4").addClass("span4");
$("#spanislas5").addClass("span5");
$("#spanislas6").addClass("span6");
$("#spanislas7").addClass("span7");
$("#spanislas8").addClass("span8");
$("#spanislas9").addClass("span9");
$("#spanislas10").addClass("span10");
$("#spanislas11").addClass("span11");
$("#spanislas12").addClass("span12");
$("#spanislas13").addClass("span13");
$("#spanislas14").addClass("span14");
$("#spanislas15").addClass("span15");
},1700);
});
我在网站上工作,我在英雄横幅中有一个动画。 但是,还有一个 Jquery 预加载器。 如果我使用我以前的代码(见下文),css 动画开始发生,同时预加载器在这里,所以根据你的 wifi,你可能只会看到它的结尾。
// Preloader
$(window).on('load', function (event) {
$('.preloader').delay(1200).fadeOut(500);
});
html, body {
font-family: 'Montserrat', sans-serif;
margin: 0;
width: 100%;
height: 100%;
}
.text-center {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.animated-text {
font-size: calc(8px + 2vw);
line-height: 45px;
}
.animated-text a {
color: #666;
text-decoration: none;
flex-grow: 2;
}
.animated-text .entering {
color: #fff;
opacity: 0;
font-size: calc(12px + 4vw);
font-weight: 800;
animation: text2 2.5s 1 ease-out;
animation-delay: 2.9s;
-webkit-animation-delay: 2.9s;
animation-fill-mode: forwards;
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
.animated-text span {
display: inline-block;
vertical-align: middle;
font-size: calc(10px + 2.8vw);
font-weight: 300;
transform: scale(0);
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
.animated-text span:nth-of-type(1) {
animation: color 0.5s 1;
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(2) {
animation: color 0.5s 1;
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(3) {
animation: color 0.5s 1;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(4) {
animation: color 0.5s 1;
animation-delay: 0.7;
-webkit-animation-delay: 0.7s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(5) {
animation: color 0.5s 1;
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(6) {
animation: color 0.5s 1;
animation-delay: 1.1s;
-webkit-animation-delay: 1.1s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(7) {
animation: color 0.5s 1;
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(8) {
animation: color 0.5s 1;
animation-delay: 1.3s;
-webkit-animation-delay: 1.3s;
margin-right: 8px;
margin-left: 8px;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(9) {
animation: color 0.5s 1;
animation-delay: 1.4s;
-webkit-animation-delay: 1.4s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(10) {
animation: color 0.5s 1;
animation-delay: 1.5s;
-webkit-animation-delay: 1.5s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(11) {
animation: color 0.5s 1;
animation-delay: 1.7s;
-webkit-animation-delay: 1.7s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(12) {
animation: color 0.5s 1;
animation-delay: 1.9s;
-webkit-animation-delay: 1.9s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(13) {
animation: color 0.5s 1;
animation-delay: 2.1s;
-webkit-animation-delay: 2.1s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(14) {
animation: color 0.5s 1;
animation-delay: 2.3s;
-webkit-animation-delay: 2.3s;
animation-fill-mode: forwards;
}
.animated-text span:nth-of-type(15) {
animation: color 0.5s 1;
animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
animation-fill-mode: forwards;
}
@keyframes color {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
color: #fff;
transform: scale(1);
}
}
@keyframes text2 {
from {
opacity: 0;
color: #fff;
transform: translateY(-50%);
}
to {
opacity: 1;
color: #fff;
transform: translateY(50%);
}
}
.hero-image {
/* Use "linear-gradient" to add a darken background effect to the image . This will make the text easier to read */
background-image: url("img/checkout.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* Set a specific height */
height: 100vh;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- **********************PRELOADER******************************************* -->
<div class="preloader">
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.19 52.93">
<defs>
<style>.cls-1.pepe{fill:#000000;}.cls-2.mojo{fill:#61bbbd;}</style>
</defs>
<path class="cls-1 pepe" d="M278,426.42a18.9,18.9,0,0,1-19.67,20.67c-9.92-.44-18-9.32-18-19.25V394.61a.37.37,0,0,1,.37-.37h7.83a.38.38,0,0,1,.37.37V428a10.54,10.54,0,0,0,10.5,10.59,10.33,10.33,0,1,0-3.71-20l-.08,0h-.09a.41.41,0,0,1-.41-.41v-8.07a.35.35,0,0,1,.29-.35,18.71,18.71,0,0,1,5.19-.34A18.94,18.94,0,0,1,278,426.42Z" transform="translate(-240.34 -394.19)"/>
<g class="petit-cercle">
<path class="cls-2 mojo" d="M259.21,424.12h-3.52a.57.57,0,0,0-.57.57v3.52a2.46,2.46,0,0,0,0,.28,4.08,4.08,0,0,0,4.22,3.8,4.13,4.13,0,0,0,3.94-4A4.09,4.09,0,0,0,259.21,424.12Z" transform="translate(-240.34 -394.19)"/>
</g>
<g class="grand-truc">
<path class="cls-2 mojo" d="M287.47,409.25a34,34,0,0,0-28.24-15.06,34.38,34.38,0,0,0-3.79.21.37.37,0,0,0-.32.36v7.9a.37.37,0,0,0,.43.36,25.21,25.21,0,0,1,3.68-.27A25.47,25.47,0,0,1,280.8,414.7a.37.37,0,0,0,.55.09l6-5.07A.36.36,0,0,0,287.47,409.25Z" transform="translate(-240.34 -394.19)"/>
</g>
</svg>
</div>
<!-- ************* image section with animation *************** -->
<div class="hero-image">
<div class="animated-text text-center">
<a href="#">
<span>B</span>
<span>e</span>
<span>c</span>
<span>o</span>
<span>m</span>
<span>e</span>
<span> </span>
<span>a</span>
<span> </span>
<span>m</span>
<span>e</span>
<span>m</span>
<span>b</span>
<span>e</span>
<span>r</span>
</a>
<div class="entering">
<h1>Enter the Bali world</h1>
</div>
</div>
</div>
并且如果我尝试 jQuery 文档就绪/或 Javascript windows onload 方法在预加载器之后呈现它。动画不再工作了。我在我的代码中没有看到任何建议或错误吗?
$(document).ready(function() {
$("#spanislas1").addClass("span1");
$("#spanislas2").addClass("span2");
$("#spanislas3").addClass("span3");
$("#spanislas4").addClass("span4");
$("#spanislas5").addClass("span5");
$("#spanislas6").addClass("span6");
$("#spanislas7").addClass("span7");
$("#spanislas8").addClass("span8");
$("#spanislas9").addClass("span9");
$("#spanislas10").addClass("span10");
$("#spanislas11").addClass("span11");
$("#spanislas12").addClass("span12");
$("#spanislas13").addClass("span13");
$("#spanislas14").addClass("span14");
$("#spanislas15").addClass("span15");
});
.span1 {
animation: color 0.5s 1;
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
animation-fill-mode: forwards;
}
.span2 {
animation: color 0.5s 1;
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
animation-fill-mode: forwards;
}
.span3 {
animation: color 0.5s 1;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.span4 {
animation: color 0.5s 1;
animation-delay: 0.7;
-webkit-animation-delay: 0.7s;
animation-fill-mode: forwards;
}
.span5 {
animation: color 0.5s 1;
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
animation-fill-mode: forwards;
}
.span6 {
animation: color 0.5s 1;
animation-delay: 1.1s;
-webkit-animation-delay: 1.1s;
animation-fill-mode: forwards;
}
.span7 {
animation: color 0.5s 1;
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
animation-fill-mode: forwards;
}
.span8 {
animation: color 0.5s 1;
animation-delay: 1.3s;
-webkit-animation-delay: 1.3s;
margin-right: 8px;
margin-left: 8px;
animation-fill-mode: forwards;
}
.span9 {
animation: color 0.5s 1;
animation-delay: 1.4s;
-webkit-animation-delay: 1.4s;
animation-fill-mode: forwards;
}
.span10 {
animation: color 0.5s 1;
animation-delay: 1.5s;
-webkit-animation-delay: 1.5s;
animation-fill-mode: forwards;
}
.span11 {
animation: color 0.5s 1;
animation-delay: 1.7s;
-webkit-animation-delay: 1.7s;
animation-fill-mode: forwards;
}
.span12 {
animation: color 0.5s 1;
animation-delay: 1.9s;
-webkit-animation-delay: 1.9s;
animation-fill-mode: forwards;
}
.span13 {
animation: color 0.5s 1;
animation-delay: 2.1s;
-webkit-animation-delay: 2.1s;
animation-fill-mode: forwards;
}
.span14 {
animation: color 0.5s 1;
animation-delay: 2.3s;
-webkit-animation-delay: 2.3s;
animation-fill-mode: forwards;
}
.span15 {
animation: color 0.5s 1;
animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
animation-fill-mode: forwards;
}
@keyframes color {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
color: #fff;
transform: scale(1);
}
}
@keyframes text2 {
from {
opacity: 0;
color: #fff;
transform: translateY(-50%);
}
to {
opacity: 1;
color: #fff;
transform: translateY(50%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hero-image">
<div class="animated-text text-center">
<a href="#">
<span id="spanislas1">B</span>
<span id="spanislas2">e</span>
<span id="spanislas3">c</span>
<span id="spanislas4">o</span>
<span id="spanislas5">m</span>
<span id="spanislas6">e</span>
<span id="spanislas7"> </span>
<span id="spanislas8">a</span>
<span id="spanislas9"> </span>
<span id="spanislas10">m</span>
<span id="spanislas11">e</span>
<span id="spanislas12">m</span>
<span id="spanislas13">b</span>
<span id="spanislas14">e</span>
<span id="spanislas15">r</span>
</a>
<div class="entering">
<h1>Enter the Bali world</h1>
</div>
</div>
</div>
因为有 1200 毫秒的延迟和 500 毫秒的淡出,您可以在应用 类 之前使用 1700 毫秒的超时:
$(document).ready(function() {
setTimeout(function(){
$("#spanislas1").addClass("span1");
$("#spanislas2").addClass("span2");
$("#spanislas3").addClass("span3");
$("#spanislas4").addClass("span4");
$("#spanislas5").addClass("span5");
$("#spanislas6").addClass("span6");
$("#spanislas7").addClass("span7");
$("#spanislas8").addClass("span8");
$("#spanislas9").addClass("span9");
$("#spanislas10").addClass("span10");
$("#spanislas11").addClass("span11");
$("#spanislas12").addClass("span12");
$("#spanislas13").addClass("span13");
$("#spanislas14").addClass("span14");
$("#spanislas15").addClass("span15");
},1700);
});