javascript - 预载器隐藏效果

我试图在页面上添加预加载器功能。完成。但是预加载器会像下面的图片一样淡出。


这是我的代码。

    $(document).ready(function() {
    //Preloader
    $(window).load(function() {
    preloaderFadeOutTime = 5000;
    function hidePreloader() {
    var preloader = $('.spinner-wrapper');
    preloader.fadeOut(preloaderFadeOutTime);
    }
    hidePreloader();
    });
    });

.spinner-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 999999;
}

.spinner.windcatcher {
  margin: 0 auto;
  top: 46%;
  left: 48%;
  border: 0;
  position: absolute;
  width: 4em;
  perspective: 50em;
  -webkit-animation: rotate 4s linear infinite;
  animation: rotate 4s linear infinite;
}

.spinner.windcatcher .blade {
  height: 0.5em;
  background: red;
  margin-bottom: 0.1em;
  -webkit-animation: windcatcherSpin 4s linear infinite, windcatcherBg 2s linear infinite;
  animation: windcatcherSpin 4s linear infinite, windcatcherBg 2s linear infinite;
}

.spinner.windcatcher .blade:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; }
.spinner.windcatcher .blade:nth-child(2) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; }
.spinner.windcatcher .blade:nth-child(3) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.spinner.windcatcher .blade:nth-child(4) { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; }
.spinner.windcatcher .blade:nth-child(5) { -webkit-animation-delay: 1s; animation-delay: 1s; }
.spinner.windcatcher .blade:nth-child(6) { -webkit-animation-delay: 1.25s; animation-delay: 1.25s; }
.spinner.windcatcher .blade:nth-child(7) { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
.spinner.windcatcher .blade:nth-child(8) { -webkit-animation-delay: 1.75s; animation-delay: 1.75s; }

<div class="spinner-wrapper">
  <div class="controls"></div>
  <div class="spinner windcatcher" id="windcatcher">
    <div class="blade"></div>
    <div class="blade"></div>
    <div class="blade"></div>
    <div class="blade"></div>
    <div class="blade"></div>
    <div class="blade"></div>
    <div class="blade"></div>
    <div class="blade"></div>
  </div>
</div>

在上图中，预加载器从右到左是淡出。但是我需要它不应该是从右到左的淡出。它应该从当前位置淡出。请帮忙。

谢谢。

最佳答案

尝试使用.fadeOut而不是.hide方法。

JSFiddle sample