Как сделать появление сначала фона а потом элементов jqury?

Question

[Jussss92]

У меня есть меню.

<div class="side-nav__head> Меню </div>
    <div class="side-nav__body>
                            <a href="#" class=" side-nav__body-link">Ссылка </a>
                            <a href="#" class= side-nav__body-link">Ссылка </a>
                            <a href="#" class="side-nav__body-link">Ссылка  </a>
                            <a href="#" class="side-nav__body-link">Ссылка </a>
                            <a href="#" class="side-nav__body-link">Ссылка </a>
                            <a href="#" class="side-nav__body-link ">Ссылка </a>
                            <a href="#" class="side-nav__body-link ">Ссылка </a>
                            <a href="#" class="side-nav__body-link ">Ссылка </a>
                        </div>

Мне надо, чтобы сначала появился фон(к примеру за секунду) а потом появлялись ссылки.
Но анимация работает увы некорректно

$('.side-nav__head').onclick = function (e) {
		e.preventDefault();

$('.side-nav__body').fadeToggle(50)
		$('.side-nav__body a:eq(0)').fadeToggle(200, function(){
			$(this).next().fadeToggle(200, arguments.callee);
		});

Comments

[ettychel]

Promise + setTimeout ?

Answer 1

[Danny Arty]

Вы можете легко сделать это с помощью wow.js

Comments

[Jussss92]

Так там нельзя сделать поочередное выполнение элементов.

[Danny Arty]

Jussss92, почему нельзя? можно, просто добавив delay

[Jussss92]

Danny Arty, К сожалению доп библиотеки использовать нельзя

[archelon]

Jussss92, добавьте delay в свой код

Answer 2

[archelon]

https://api.jquery.com/delay/

$('.side-nav__body').fadeToggle(1000)
$('.side-nav__body a:eq(0)').delay(1000).fadeToggle(200, function(){
  $(this).next().fadeToggle(200, arguments.callee);
});

или setTimeout

setTimeout(
  $('.side-nav__body a:eq(0)').fadeToggle(200, function(){
    $(this).next().fadeToggle(200, arguments.callee);
  }), 
1000);

Comments

[Jussss92]

увы так вобще получается непонятно,что. Сначала идет запуск анимации и ссылки появляются и скрываются. А потом запускается вторая функция и все работает

[archelon]

Jussss92,
попробуйте через setTimeout (обновил ответ)