如何使用jQuery实现元素按顺序toggleClass 替代fade序列切换效果

问题原因 #

你原有代码无法生效的核心原因有两点：

• jQuery的delay()方法默认仅作用于内置的fx动画队列，toggleClass不属于标准动画方法，不会自动承接延迟逻辑，且自定义的toggle队列和延迟逻辑没有关联
• 你为每个元素单独创建了独立队列，没有按全局的时间间隔触发类名切换

解决方案 #

方案1：使用setTimeout实现（最直观易用） #

$('.desplegable').click(function() {
    const lis = $(this).parent().find('.pops');
    let delay = 0;
    
    lis.each(function() {
        const $li = $(this);
        setTimeout(() => {
            $li.toggleClass('appear');
        }, delay);
        delay += 100; // 每个元素的触发间隔，可自行调整
    });
});

方案2：使用jQuery队列实现 #

如果要保留队列写法，需要使用默认的fx队列，且必须手动调用next()推进队列执行：

$('.desplegable').click(function() {
    const lis = $(this).parent().find('.pops');
    let delay = 0;
    
    lis.each(function() {
        const $li = $(this);
        $li.delay(delay).queue(function(next) {
            $li.toggleClass('appear');
            next(); // 必须调用，否则队列会卡住
        });
        delay += 100;
    });
});

补充说明 #

如果需要类名切换时有过渡动画，可给.pops添加对应的CSS过渡规则：

.pops {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}
.pops.appear {
    opacity: 1;
    transform: translateY(0);
}

内容的提问来源于stack exchange，提问作者Juárez