как показать div после показа другого div

Question

Я пытаюсь создать окно оценки опроса.

Я сделал div и вставил в них 4 заголовка. они не отображаются.

опрос содержит четыре вопроса, и после ответа на 4-й вопрос появляется окно Evalv.

Я пытаюсь сделать, когда появился eval div, он должен показать(вопрос 1 действителен ... затем через 1 секунду вопрос 2 действителен ... и т. д.) И тогда должно появиться окно с результатами.

Надеюсь, вы получаете то, что я пытаюсь сказать ...

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

Я ценю любую форму, ребята, помогите. И заранее спасибо за ваше время.

Вот ссылка на страницу, которую я пытаюсь смоделировать: http://courses.healthshul.com/test1/

После выполнения 4 вопросов по части оценки опроса я не могумодель.

еще раз спасибо

Answer 1

Есть разные способы сделать это, и вот простой, вызвав fadeIn и fadeOut и внутри fade Out сделайте следующий div fade In. Смотрите фрагмент кода для более подробной информации:

$('.results').hide();
$('.results.first').fadeIn(1000).fadeOut(2000,function() {
   $('.results.second').fadeIn(1000).fadeOut(2000,function() {
      $('.results.third').fadeIn(1000).fadeOut(2000,function() {
	 $('.results.fourth').fadeIn(1000).fadeOut(2000,function() {

        })				 
      })
   })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='results first'>Question 1 Result</div>
<div class='results second'>Question 2 Result</div>
<div class='results third'>Question 3 Result</div>
<div class='results fourth'>Question 4 Result</div>