如何在 Jquery 中创建窗帘淡出效果？

Question

我想向我的网站添加预加载器，我有以下代码：<div class="loader" ></div><script>document.addEventListener('DOMContentLoaded', function() {jQuery(function($){$('.loader').fadeOut('slow');}); });</script><style>.elementor-element-edit-mode .loader{display: none;}.loader {position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;z-index: 9999;background: url('http://ibiza-bar.co.il/wp-content/uploads/2020/04/ibiza-logo.png') 50% 50% no-repeat #fff;}</style>我希望它看起来像窗帘关闭，而不是这种简单的淡出效果，就像下面的示例一样：https://i.stack.imgur.com/3eo6y.gif 知道如何根据我的代码实现这种独特的淡出效果吗？

Answer 1

用居中的白色框覆盖背景并使其折叠至 0 宽度。

setTimeout(() => {

  $("#loader .logo").animate({ opacity: 0 }, 1000);

  $("#loader .cover").animate({ width: "0%" }, 1000, () => {

    $("#loader").hide(); // When animation is complete hide the element.

  });

}, 1500);

#bg {

  background: url('http://placekitten.com/630/195');

  width: 630px;

  height: 195px;

  position: absolute;

}

#loader {

  position: fixed;

  height: 100%;

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

}

#loader .logo {

  background: url('http://ibiza-bar.co.il/wp-content/uploads/2020/04/ibiza-logo.png');

  background-repeat: no-repeat;

  background-size: contain;

  position: absolute;

  width: 150px;

  height: 150px;

}

#loader .cover {

  background: #fff;

  width: 100%;

  height: 100%;

  position: absolute;

}

body { margin: 0 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="bg"></div>

<div id="loader">

  <div class="cover"></div>

  <div class="logo"></div>

</div>