如何实现max-height从底部向上扩展的jQuery动画效果？

现有HTML结构：

<div id = "parent">
    <div id = "button"></div>
</div>

同时存在动态生成的元素 <div id="list"></div>。

目前通过以下代码可实现list从button下方显示，动画为从上到下展开：

$("#button").on("clicked",function(){   
    $("#parent").append(list)
    $("#parent").animate({ "max-height": '300px' }, 500)
}

需求是实现反向效果：让list从button上方展开，同时parent的高度向上扩展。尝试用prepend插入list并动画max-height，但parent高度仍向下延伸，无法达到预期效果。

解决方案 #

核心思路 #

要让容器向上扩展，需固定容器的底部位置，使高度增加时只能向上延伸，而非向下。

步骤1：设置父容器的CSS定位 #

给parent添加定位样式，锁定其底部位置：

#parent {
    position: fixed; /* 若布局需要相对定位，可改用absolute，需确保父级有非static定位 */
    bottom: 20px; /* 调整为你需要的底部固定距离 */
    max-height: 50px; /* 初始高度，与button的高度匹配 */
    overflow: hidden;
    width: 100%; /* 根据实际布局设置宽度 */
}

步骤2：修改JavaScript逻辑 #

调整插入元素和动画的顺序，确保动画触发时容器向上扩展：

$("#button").on("click",function(){   
    // 避免重复插入list元素
    if (!$("#list").length) {
        $("#parent").prepend(list);
    }
    // 执行高度扩展动画
    $("#parent").animate({ "max-height": '300px' }, 500);
}

可选：添加展开/收起切换逻辑 #

如果需要支持点击按钮切换展开/收起状态，可修改JS如下：

$("#button").on("click",function(){   
    const $parent = $("#parent");
    const targetHeight = $parent.css("max-height") === "300px" ? "50px" : "300px";
    
    if (targetHeight === "50px") {
        // 收起：先动画收缩高度，完成后移除list
        $parent.animate({ "max-height": targetHeight }, 500, function(){
            $("#list").remove();
        });
    } else {
        // 展开：先插入list，再执行扩展动画
        if (!$("#list").length) {
            $parent.prepend(list);
        }
        $parent.animate({ "max-height": targetHeight }, 500);
    }
}

原理说明 #

当parent设置fixed或absolute定位并固定bottom值后，容器的底部位置被锁定，此时增大max-height，容器只能向上扩展高度，从而实现list从button上方展开的动画效果。

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