如何在jQuery中为两组each()函数的动画设置执行队列？

要实现majorpt元素全部淡入完成后再依次淡入minorpt元素，核心是计算第一个动画序列的总时长，延迟启动第二个序列。具体修改如下：

步骤1：确保元素初始隐藏 #

首先给目标元素设置初始隐藏状态，否则fadeIn动画不会生效：

.majorpt, .minorpt {
    display: none;
}

步骤2：修改jQuery代码实现序列排队 #

调整标签点击事件中的动画逻辑，精准控制两个动画序列的执行顺序：

$("#tabs > ul > li > a").click(function (){
    $("#tabs > ul > li > a").css({ background: "#a2a2a2", color: "#cecece"});
    $(this).css({ background: "#eaeaea", color: "#333"});
    const thisTab = $(this).attr("href");
    $("#tabs > div:visible").fadeOut(200, function(){
        $(thisTab).fadeIn(200, function() {
            const $majorElements = $(thisTab + " .majorpt");
            const majorCount = $majorElements.length;
            
            // 执行majorpt元素的依次淡入
            $majorElements.each(function(index, element){
                setTimeout(function (){
                    $(element).fadeIn(500); 
                }, 1000 * index);
            });
            
            // 计算majorpt动画总时长：最后一个元素的触发延迟 + 单个动画时长
            const totalMajorDuration = 1000 * (majorCount - 1) + 500;
            // 延迟启动minorpt的动画序列
            setTimeout(function() {
                $(thisTab + " .minorpt").each(function(index, element){
                    setTimeout(function (){
                        $(element).fadeIn(500); 
                    }, 1000 * index);
                });
            }, totalMajorDuration);
        });
    });
});

逻辑说明 #

• 先获取majorpt元素的总数，计算整个序列的总耗时：最后一个元素的触发延迟（1000*(数量-1)）加上单个元素的淡入时长（500ms）。
• 以此总耗时作为延迟时间，确保minorpt的动画在majorpt全部完成后才开始依次执行。
• 将元素淡入逻辑放在标签页自身fadeIn的回调中，避免标签页未完全显示就启动元素动画导致的混乱。

内容的提问来源于stack exchange，提问作者smallnorthumbrianvillage