如何在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>

我希望它看起来像窗帘一样，而不是简单的淡出效果，就像下面的例子：

​

您知道如何根据我的代码实现这种独特的淡出效果吗？

谢谢!

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>

​