Поочерёдное добавление класса jQuery?

Question

[margarittapizza]

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

<ul>
<li> Пункт 1 </li>
<li> Пункт 2 </li>
<li> Пункт 3 </li>
<li> Пункт 4 </li>
</ul>

Comments

[Igor Ustyugov]

Код покажите

Answer 1

[0xD34F]

const $elements = $('здесь селектор ваших элементов');
const updateElement = i => $elements.eq(i).addClass('здесь ваш класс');
const delay = 500;

Можно сразу назначить таймауты для каждого из элементов, с временем задержки, зависящим от индекса элемента:

$elements.each(i => setTimeout(updateElement, (i + 1) * delay, i));

Или время задержки у всех одинаковое, таймауты назначаются поочерёдно - следующий запускается из коллбека предыдущего:

(function next(i) {
  if (i < $elements.length) {
    setTimeout(() => {
      updateElement(i);
      next(-~i);
    }, delay);
  }
})(0);

Или, вместо таймаутов используется интервал:

const intervalID = setInterval(
  i => updateElement(++i[0]).length || clearInterval(intervalID),
  delay,
  [ -1 ]
);

Answer 2

[Alexey Moloko]

(".spoiler").on("click", function() {
    $(this).next().slideToggle("slow")
})

Comments

[margarittapizza]

Нет, вы немного не поняли.
Вот, нашёл идеальный пример, попробуйте открыть меню.
preview.themeforest.net/item/enardo-blog-magazine-...

Answer 3

[Vadim Bogomazov]

Примерно так

Comments

[margarittapizza]

Нет, вы немного не поняли.
Вот, нашёл идеальный пример, попробуйте открыть меню.
preview.themeforest.net/item/enardo-blog-magazine-...