Как скрыть по одному li из списка снизу вверх?

Question

[Сергей Пономарёв]

Сейчас список появляется по одному снизу вверх, как скрыть их так же по одному снизу вверх?

$('.payment-innovation .list-block').each(function() {
          let items = $(this).find('ul li');
          items.css('opacity', 0);

          for (var i = 0; i < items.length; i++) {
            $(items[i]).delay(i * 400).animate({
              opacity: 1
            }, 400);
          }
        });	

let head__click = $('.payment-innovation .list-block .list-block__head') 
  head__click.click(function() {
    $(this).parent().find('.list-block__listing .item').fadeToggle()
  })

Answer 1

[0xD34F]

Точно так же, как и показываете, но в обратном порядке:

$('.payment-innovation .list-block').each(function() {
  const $items = $('ul li', this);
  const duration = 400;

  $items.each((i, n) => $(n)
    .delay(($items.length - i - 1) * duration)
    .animate({ opacity: 0 }, duration)
  );
});

Comments

[Сергей Пономарёв]

Затупил)) спасибо большое)

[Сергей Пономарёв]

А как добавить к этому toggle и скрываются все блоки, а не 1?

[0xD34F]

Сергей Пономарёв, я не понимаю, что вы говорите.

[Сергей Пономарёв]

0xD34F, https://jsfiddle.net/9cyuxgq7/ Как скрывать по 1 списку)

[0xD34F]

Сергей Пономарёв,

$('.payment-innovation .list-block .list-block__head').click(function() {
  const $this = $(this);
  const $items = $this.closest('.list-block').find('.item');
  const hidden = $this.toggleClass('hidden').hasClass('hidden');
  const duration = 400;

  $items.each((i, n) => $(n)
    .delay((hidden ? $items.length - i - 1 : i) * duration)
    .animate({ opacity: +!hidden }, duration)
  );
});

[Сергей Пономарёв]

0xD34F, благодарю и с Наступающими Праздниками)