Javascript задержка загрузки страницы

Question

У моей страницы есть экран загрузки. Экран загрузки загружается в течение 5 секунд, после чего исчезает и отображает остальные элементы div в теле.

Теперь остальные элементы div в теле имеют собственную анимацию. Проблема в том, что анимация начинает анимацию при загрузке страницы. Я хочу, чтобы div запускал анимацию только после того, как на экране загрузки закончилось время ожидания, равное 5 с. Я пытался добавить задержку анимации плюс 5 с для каждого деления, но есть много дел, и я не думаю, что это лучший способ.

это код, который я использую для тайм-аута экрана загрузки.

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

Answer 1

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