javascript - jQuery 延迟 fadeIn 花费的时间比预期的要长

Question

我一直在尝试使用 jQuery 淡出 CSS3 预加载器。我一直试图停止动画(这是一个旋转的盒子)，然后淡入盒子内的一个字母，然后让它们都淡出，字母比盒子晚一点淡出。我遇到过这样的问题，即字母消失的时间比我想要的要晚，如果消失得非常快，它就会出现。这是代码:

	//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('.loader-inner').css({'-webkit-animation': 'none'});
$('.loader').delay(100).css({'-webkit-animation': 'none'}); // will first fade out the loading animation
$('.letter').delay(100).fadeIn('slow'); 
$('.preloader').delay(2050).fadeOut('slow');// will fade out the white DIV that covers the website.
$('.letter').delay(2060).fadeOut(900);
$('body').delay(2060).css({'overflow':'visible'});
		});
	//]]>

body, html {
    height: 100%;
    text-align: center;
}

body {
  background-color: #2f2f2f;
  }
.preloader {
 position: fixed;
 

 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 99999;
 background-color: #2f2f2f;
}

.loader {
  display: block;
  width: 60px;
  height: 60px;
  position: fixed;
  border: 5px solid #d5b317;
  top: 50%;
  left:50%;
  -webkit-animation: loader 2s infinite ease;
  z-index: -10;
  overflow: hidden;
  margin-left: -29px
}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #d5b317;
  -webkit-animation: loader-inner 2s infinite ease-in;
  z-index: -10;
}
@font-face {
    font-family: 'Adobe Gurmukhi';
    src: url(/fonts/AdobeGurmukhi-Regular.ttf);
}

.letter {
 display:hidden;
 color: #f7d11e;
 font-family: 'Adobe Gurmukhi';
 font-size: 70px;
 position:absolute;  
 top: 50%;
 left: 50%;
 margin-top: -17px;
 margin-left: -19px;
 z-index: -9;

}
@-webkit-keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
      </script>
<!--preloader-->
 <div class="preloader">
   <span class="loader"><span class="loader-inner"></span></span>
     </div>
    <span><p class="letter">ਅ</p></span>

Answer 1

.preloader 的 z-index (99999) 高于 .letter (-9)。您遇到的延迟是 .preloader 淡出并因此显示 .letter 之前的延迟。作为快速修复，我使 .letter 的 z-index 高于 .preloader 的 z-index，延迟消失了。

	//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('.loader-inner').css({'-webkit-animation': 'none'});
$('.loader').delay(100).css({'-webkit-animation': 'none'}); // will first fade out the loading animation
$('.letter').delay(100).fadeIn('slow'); 
$('.preloader').delay(2050).fadeOut('slow');// will fade out the white DIV that covers the website.
$('.letter').delay(2060).fadeOut(900);
$('body').delay(2060).css({'overflow':'visible'});
		});
	//]]>

body, html {
    height: 100%;
    text-align: center;
}

body {
  background-color: #2f2f2f;
  }
.preloader {
 position: fixed;
 

 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 99999;
 background-color: #2f2f2f;
}

.loader {
  display: block;
  width: 60px;
  height: 60px;
  position: fixed;
  border: 5px solid #d5b317;
  top: 50%;
  left:50%;
  -webkit-animation: loader 2s infinite ease;
  z-index: -10;
  overflow: hidden;
  margin-left: -29px
}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #d5b317;
  -webkit-animation: loader-inner 2s infinite ease-in;
  z-index: -10;
}
@font-face {
    font-family: 'Adobe Gurmukhi';
    src: url(/fonts/AdobeGurmukhi-Regular.ttf);
}

.letter {
 display:hidden;
 color: #f7d11e;
 font-family: 'Adobe Gurmukhi';
 font-size: 70px;
 position:absolute;  
 top: 50%;
 left: 50%;
 margin-top: -17px;
 margin-left: -19px;
 z-index: 999999;

}
@-webkit-keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
      </script>
<!--preloader-->
 <div class="preloader">
   <span class="loader"><span class="loader-inner"></span></span>
     </div>
    <span><p class="letter">ਅ</p></span>