如何在 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(() => {&nbsp; $("#loader .logo").animate({ opacity: 0 }, 1000);&nbsp; $("#loader .cover").animate({ width: "0%" }, 1000, () => {&nbsp; &nbsp; $("#loader").hide(); // When animation is complete hide the element.&nbsp; });}, 1500);#bg {&nbsp; background: url('http://placekitten.com/630/195');&nbsp; width: 630px;&nbsp; height: 195px;&nbsp; position: absolute;}#loader {&nbsp; position: fixed;&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;}#loader .logo {&nbsp; background: url('http://ibiza-bar.co.il/wp-content/uploads/2020/04/ibiza-logo.png');&nbsp; background-repeat: no-repeat;&nbsp; background-size: contain;&nbsp; position: absolute;&nbsp; width: 150px;&nbsp; height: 150px;}#loader .cover {&nbsp; background: #fff;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; 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">&nbsp; <div class="cover"></div>&nbsp; <div class="logo"></div></div>