依次切换 Class

Question

我正在尝试按顺序切换 class 元素。我得到了我发现并修改后的这段代码，但只能使用 fade:

    $('.desplegable').click(function() {
            
    var lis = $(this).parent().find('.pops');
    var delay = 0;
    
    lis.each(function() {
        var $li = $(this);
        $li.queue('fade', function(next) {
            $li.delay(delay).fadeIn(0, next);
        });
        
        $li.dequeue('fade');
        
        delay += 100;
    });
});

是否可以通过切换 class 来实现？像这样，但这里的顺序不起作用

$('.desplegable').click(function() {
            
    var lis = $(this).parent().find('.pops');
    var delay = 0;
    
    lis.each(function() {
        var $li = $(this);
        $li.queue('toggle', function(next) {
            $li.delay(delay).toggleClass('appear', next);
        });
        
        $li.dequeue('toggle');
        
        delay += 100;
    });
});

这是HTML

<div>
<div class="desplegable">Title</div>
<div class="pops">Element 1</div>
<div class="pops">Element 2</div>
<div class="pops">Element 3</div>
</div>

Answer 1

要完成您需要的操作，您可以使用 fadeToggle() 并在集合中的每个 .pops 元素上增加延迟。

这也可以扩展为在连续点击时隐藏元素时反转淡入淡出的顺序：

$('.desplegable').click(function() {
  var $pops = $(this).parent().find('.pops').stop();      
  if ($pops.eq(0).is(':visible'))
    $pops = $($pops.get().reverse());
    
  $pops.each((i, el) => $(el).delay(100 * i).fadeToggle(300)); 
});

.pops { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="desplegable">Title</div>
  <div class="pops">Element 1</div>
  <div class="pops">Element 2</div>
  <div class="pops">Element 3</div>
</div>

依次切换 Class

Toggle Class sequentially

queue

jquery

timeout

sequence

settimeout