Question

我的页面有加载屏幕。淡出之前，载入画面会载入5秒钟，并显示体内的其他div。

现在，体内的其余div都有自己的动画。问题是页面加载时所有动画都开始动画。我想要的是，div仅在加载屏幕完成其5s超时后才开始动画。我尝试为每个div增加5s的动画延迟，但是有很多div，我不认为这是最好的方法。

这是我用于加载屏幕超时的代码。

$(window).on("load", function () {
  $(".preloader").delay(5000).fadeOut("slow");
});

Answer 1

jQuery's 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>

JavaScript页面加载延迟

1 个答案: