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