jQuery的
我的页面有加载屏幕。加载屏幕加载5秒后逐渐消失，并显示主体中的其余div。
现在，身体中其余的div都有自己的动画。问题是当页面加载时，所有的动画都开始设置动画。我想要的是，div只有在加载屏幕完成5秒的超时后才能开始动画。我试着为每个div添加+5s的动画延迟，但有很多div，我认为这不是最好的方法。
这是我用于加载屏幕超时的代码。
$(window).on("load", function () {
$(".preloader").delay(5000).fadeOut("slow");
});
fadeOut允许您在动画完成后指定回调函数。这样，您就不需要为每个要制作动画的内容添加延迟，只需在fadeOut的回调函数中指定动画的开始。
下面是一个工作示例。初始.preloader淡出后，文本慢慢变为红色。
$(window).on('load', function() {
$('.preloader').fadeOut(1000, 'linear', () => {
$('.content').css('color', 'red')
})
})* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.preloader {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: red;
}
.content {
transition: all 1s ease;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="preloader"></div>
<div class="content">Some content</div>