使用jQuery UI实现侧边滑出div时同步平滑移动另一div的问题

你需要实现#expander从左侧平滑滑出时，#header同步收缩的动画，但目前遇到几个核心问题：

• #header无法平滑过渡，直接跳转到新宽度
• jQuery UI的slide动画不支持普通jQuery的progress回调，无法逐帧同步两个元素的动画
• #expander包含动态元素，无法硬编码宽度值

问题代码的核心缺陷 #

你尝试的代码中，jQuery UI的show("slide")确实不支持progress参数，且#header的width:100%+float:right布局会导致宽度计算异常，无法跟随#expander的滑出同步变化。

解决方案1：手动获取动态宽度，用jQuery animate实现同步动画 #

先临时显示#expander获取真实宽度，再隐藏，然后通过animate的step回调逐帧同步两个元素的动画：

<div id='expander' style="display:none;">
    <!-- 动态内容 -->
    <p>动态加载的自适应宽度内容</p>
</div>
<div id='header'>
    <img src='placeholder.png' />
</div>

#header {
    height: 100px;
    background-color: red;
    float: right;
    width: 100%;
}

#expander {
    height: 100%;
    background-color: #176087;
    display: inline-block;
    vertical-align: top;
    padding: 0;
    margin-left: 0;
    z-index: 1;
    width: fit-content;
}

// 临时显示元素获取真实宽度
$("#expander").show().css("visibility", "hidden");
const expanderWidth = $("#expander").outerWidth();
$("#expander").hide().css("visibility", "visible");

// 同步执行两个元素的动画
$("#expander").animate(
    { width: expanderWidth, marginLeft: 0 },
    {
        duration: 500,
        step: function(now) {
            // 实时计算并更新header宽度
            $("#header").width($("body").width() - now);
        }
    }
);

说明：通过临时显示元素获取动态内容的真实宽度，利用animate的step回调逐帧同步#header的宽度变化，实现完全平滑的联动效果。

解决方案2：用CSS过渡替代jQuery UI动画（更轻量） #

放弃jQuery UI的slide动画，改用CSS过渡控制动画，通过类切换触发，代码更简洁：

<div id='expander' class="expander-hidden">
    <!-- 动态内容 -->
    <p>动态加载的自适应宽度内容</p>
</div>
<div id='header' class="header-full">
    <img src='placeholder.png' />
</div>

#header {
    height: 100px;
    background-color: red;
    float: right;
    transition: width 0.5s ease; /* CSS过渡动画 */
}

#expander {
    height: 100%;
    background-color: #176087;
    display: inline-block;
    vertical-align: top;
    padding: 0;
    margin-left: 0;
    z-index: 1;
    width: fit-content;
    transition: margin-left 0.5s ease;
}

/* 隐藏状态：移出左侧可视区域 */
.expander-hidden {
    margin-left: -100%;
}

/* header初始全屏宽度 */
.header-full {
    width: 100%;
}

// 获取expander的真实宽度
const expanderWidth = $("#expander").outerWidth();

// 切换类触发动画
$("#expander").removeClass("expander-hidden");
$("#header").width($("body").width() - expanderWidth);

说明：利用CSS过渡自动处理动画的平滑效果，只需提前获取#expander的宽度并设置#header的目标宽度，浏览器会自动完成过渡动画。

解决方案3：监听jQuery UI全局动画事件（兼容原有slide动画） #

如果必须保留jQuery UI的slide动画，可以通过全局animate事件监听进度，间接实现同步：

// 先获取expander真实宽度
$("#expander").show().css("visibility", "hidden");
const expanderWidth = $("#expander").outerWidth();
$("#expander").hide().css("visibility", "visible");

// 监听全局动画事件
$(document).on("animate", function(event, elem) {
    if ($(elem).is("#expander")) {
        // 根据动画进度计算当前宽度
        const currentProgress = parseFloat(event.elem.style.width) / 100;
        const currentWidth = expanderWidth * currentProgress;
        $("#header").width($("body").width() - currentWidth);
    }
});

// 执行jQuery UI slide动画
$("#expander").show("slide", { direction: "left", duration: 500 }, function() {
    // 动画结束后移除监听，避免影响其他动画
    $(document).off("animate");
});

说明：通过全局animate事件捕获#expander的动画进度，计算当前宽度后同步更新#header，但这种方法依赖jQuery UI内部的动画实现逻辑，兼容性稍弱。

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