如何正确地让预加载器平滑淡出

Question

我正在使用我在 Internet 上找到的这个脚本，但是淡出不起作用。我想要一个平滑的淡出。

var loader = document.getElementById('spinner');
window.addEventListener("load", function() {
  //Hide the spinner after 2 seconds
  setTimeout(function() {
    loader.style.display = 'none';
  }, 2000);
});

$("#spinner").fadeOut();

<section id="spinner">
  <div id="preloader">Loading...</div>
</section>

Answer 1

要执行您需要的操作，您需要在页面中包含对 jQuery.js 脚本的引用，并且还需要在 [=13= 的处理程序中调用 fadeOut() 行]，以便它在 2 秒过去后运行。试试这个：

window.addEventListener("load", function() {
  setTimeout(function() {
    $("#spinner").fadeOut();
  }, 2000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<section id="spinner">
  <div id="preloader">Loading...</div>
</section>

如何正确地让预加载器平滑淡出

How to correctly have a smooth preloader fade out

jquery

script