我的预加载器没有褪色，一直在无限循环中滚动

Question

我现在正在建立一个网站，我已经使用预加载器淡入淡出并显示内容，但它似乎工作得不太好，它没有淡入淡出，只是在无限循环中滚动，我如何实现淡入淡出？我的jquery版本是3.2.1，下面是我使用的代码：

​

jQuery(document).ready(function($) {
  $(window).load(function() {
    $('#preloader').fadeOut('slow', function() {
      $(this).remove();
    });
  });

});

#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center;
}

<body>
  <div id="preloader"></div>
  <p>
    This is the page
  </p>
</body>

​

Answer 1

您的代码是正确的。只需在代码中添加<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​

jQuery(document).ready(function($) {
  $(window).load(function() {
    $('#preloader').fadeOut(5000, function() {
      $(this).remove();
    });
  });

});

#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="preloader"></div>
  <p>
    This is the page
  </p>
</body>

​