如何在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的宽度。