jQuery延迟淡入时间超过预期

I have been trying to fade out a CSS3 preloader with jQuery. I have been trying to stop the animation (which is a box rotating), and then fade in a letter inside the box then, have them both fade out, the letter fading out a little later than the box. I have had the problem where the letter fades in way later than I want it to and when it comes on if fades out really fast. Here is the code:

我一直试图用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>

更多相关文章

随机推荐