点击按钮切换左侧Navbar显隐时，右侧Navbar平滑左移动画实现问题

方案一：使用CSS过渡（推荐，性能更优） #

这种方式依赖CSS的transition属性，比JS动画更流畅，也更易维护。

1. 调整CSS样式：

/* 左侧Navbar基础样式，假设宽度为200px */
#navbar_left {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100vh;
  /* 添加滑入滑出过渡 */
  transition: transform 0.6s ease;
}

/* 隐藏左侧Navbar的类 */
#navbar_left.hidden {
  transform: translateX(-100%);
}

/* 右侧Navbar基础样式 */
#navbar_right {
  margin-left: 200px; /* 让出左侧Navbar的宽度 */
  width: calc(100% - 200px);
  /* 添加margin-left的过渡动画 */
  transition: margin-left 0.6s ease;
}

/* 左侧隐藏时，右侧占满宽度 */
#navbar_right.full-width {
  margin-left: 0;
  width: 100%;
}

2. 修改jQuery代码：

$(document).ready(function(){
  $("#mapfliter").click(function(){
    // 切换左侧Navbar的隐藏类
    $("#navbar_left").toggleClass("hidden");
    // 同步切换右侧Navbar的宽度类
    $("#navbar_right").toggleClass("full-width");
  });
});

方案二：使用jQuery动画配合toggle slide #

如果你想继续使用jQuery UI的toggle("slide")功能，可以在左侧动画完成后，用animate()方法驱动右侧的平滑移动：

$(document).ready(function(){
  $("#mapfliter").click(function(){
    const leftNav = $("#navbar_left");
    const rightNav = $("#navbar_right");
    // 获取左侧Navbar的宽度
    const leftWidth = leftNav.outerWidth();

    // 执行左侧的slide动画，完成后处理右侧
    leftNav.toggle("slide", {direction: "left"}, 'slow', function(){
      if(leftNav.is(":visible")){
        // 左侧显示时，右侧移回原位置
        rightNav.animate({
          marginLeft: leftWidth
        }, 'slow');
      } else {
        // 左侧隐藏时，右侧移到屏幕左边缘
        rightNav.animate({
          marginLeft: 0
        }, 'slow');
      }
    });
  });
});

注意：该方案需要确保已引入jQuery UI库（toggle("slide")是jQuery UI提供的方法）。

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