Задержка анимации в списке - переключатель не работает

Question

Я просто хочу создать элементы списка с задержкой, появляющиеся медленно, и все готово. Но мне нужно, чтобы он работал как переключатель щелчка. Прямо сейчас, когда я нажимаю кнопку «щелкнуть» один раз, он будет медленно отображать весь список, но мне нужно скрыть его при втором щелчке, как переключатель щелчка. Я пытался добавить setTimeout и добавить дополнительный класс, но безуспешно.

$('.click').click(function(){
    setTimeout(function(){ 
        $(".ul-nav li").each(function(i, li) {
            var $list = $(this).closest('ul');
            $list.delay(130).queue(function() {
                $(li).addClass('animation-li').fadeIn(2000);
                $list.dequeue();
            });
        });
    }, 30);
});

https://jsfiddle.net/0kj26v1a/

Что мне делать?

Answer 1

Пожалуйста, попробуйте это

с reverse анимацией

let display=true;
//Menu transition
	$('.click').click(function(){
     let li=display ? $(".ul-nav li") : $($(".ul-nav li").get().reverse());
    	li.each(function(i, li) {
    	var $list = $(this).closest('ul');
    	$list.delay(130).queue(function() {
        	$(li).toggleClass('animation-li').fadeIn(2000);
        $list.dequeue();
    	});
	});
  display=!display;
});

ul li{
  opacity: 0;
}

.animation-li{
  opacity: 1!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<p class="click">Click</p>

<ul class="ul-nav">
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
  <li>abc</li>
</ul>

Answer 2

Проблема, похоже, связана с тем, что вы просто добавляете класс animation-li и не удаляете его при повторном нажатии. Для этого вы можете использовать toggleClass из jQuery. Это просто удалит класс, если он уже добавлен, или добавит иначе.

//Menu transition
$('.click').click(function() {
    $(".ul-nav li").each(function(i, li) {
        var $list = $(this).closest('ul');
        $list.delay(130).queue(function() {
            $(li).toggleClass('animation-li').fadeIn(2000);
            $list.dequeue();
        });
    });
});

ul li{
  opacity: 0;
}

.animation-li{
  opacity: 1!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<p class="click">Click</p>

<ul class="ul-nav">
    <li>abc</li>
    <li>abc</li>
    <li>abc</li>
    <li>abc</li>
    <li>abc</li>
</ul>