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（99999）的z-index高于.letter（-9）的z-index。您遇到的延迟是.preloader消失之前的延迟，从而显示.letter。作为一个快速修复，我使.letter的z-index高于.preloader，并且延迟消失了。

	//<![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>

Answer 2

你正在做的是首先使用延迟，这意味着你想要在延迟一段时间之后调用fadeOut并且你给出延迟时间2秒并且它按预期正常工作。

它在2秒后开始淡出。

我认为如果你希望尽快淡出它，那么它会按预期工作，然后你必须减少延迟删除的延迟时间。

希望这可以帮到你。谢谢！！

Answer 3

你可以试试回调函数

   $('.letter').delay(100).fadeIn('slow', function(){ 
   // function called after fade in finished
    setTimeout(function(){
          $('.preloader').fadeOut('slow');
          $('.letter').fadeOut(900);
          $('body').css({'overflow':'visible'});
       }, 2600);
    });

Answer 4

用这个替换你的代码，两者都会同时fadeOut。

    // will fade out the white DIV that covers the website.
    $('.letter').delay(2060).fadeOut('fast');

jQuery延迟淡入时间超过预期

4 个答案: