如何避免jQuery .slideToggle()动画时相邻div元素发生跳动？

我明白你遇到的问题了——当展开额外的地图或表单div时，原本居中的联系信息div突然跳动，这确实挺影响体验的。问题出在.slideToggle()是通过快速改变元素高度和display属性来实现显示隐藏，这会触发页面布局的突然重排，而你之前尝试的CSS过渡没生效，大概率是因为jQuery的动画和CSS transition的执行时机冲突，或者布局结构没给过渡留好可操作的空间。

下面给你一套可行的解决方案，核心是用弹性布局（flex）+ CSS过渡替代单纯的jQuery动画，实现联系信息div平滑从中间滑到左侧再返回的效果：

1. 调整HTML结构 #

把联系信息和额外内容（地图/表单）放在同一个flex容器里，让它们的布局变化能被统一控制：

<div class="contact-wrapper">
  <!-- 默认显示的联系信息 -->
  <div class="contact-info">
    <!-- 你的联系信息内容 -->
  </div>
  <!-- 切换显示的额外内容 -->
  <div class="extra-panel">
    <!-- 地图或表单内容 -->
  </div>
</div>
<!-- 切换按钮 -->
<button class="toggle-btn">切换内容</button>

2. 设置基础CSS样式 #

通过flex布局控制两个div的宽度分配，给联系信息div加过渡属性，让它的宽度变化平滑生效：

.contact-wrapper {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.contact-info {
  /* 初始状态占满容器宽度，实现居中效果 */
  flex: 1 1 100%;
  transition: flex-basis 0.3s ease;
  /* 保留你原本的联系信息样式 */
  padding: 20px;
  background: #f5f5f5;
}

.extra-panel {
  /* 初始状态宽度为0，隐藏内容 */
  flex: 0 0 0;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease, flex-basis 0.3s ease;
  /* 额外内容的样式 */
  padding: 20px;
  background: #eee;
}

/* 激活状态：给额外内容设置固定宽度，同时压缩联系信息的宽度 */
.extra-panel.active {
  flex: 0 0 350px;
  height: auto;
}

.contact-wrapper.active .contact-info {
  flex-basis: calc(100% - 350px);
}

3. 修改jQuery交互逻辑 #

不再依赖.slideToggle()，而是通过添加/移除active类来触发CSS过渡，同时处理额外内容的高度动画：

$('.toggle-btn').on('click', function() {
  const $extraPanel = $('.extra-panel');
  const $wrapper = $('.contact-wrapper');

  if ($extraPanel.hasClass('active')) {
    // 关闭额外面板：先把高度设为当前值，再过渡到0
    const currentHeight = $extraPanel.height();
    $extraPanel.css('height', currentHeight);
    
    setTimeout(() => {
      $extraPanel.css('height', 0);
    }, 10);
    
    // 过渡结束后移除类，重置样式
    setTimeout(() => {
      $extraPanel.removeClass('active');
      $wrapper.removeClass('active');
      $extraPanel.css('height', '');
    }, 300);
  } else {
    // 打开额外面板：先添加类，再从0过渡到自动高度
    $extraPanel.addClass('active');
    $wrapper.addClass('active');
    
    const autoHeight = $extraPanel.height();
    $extraPanel.css('height', 0);
    
    setTimeout(() => {
      $extraPanel.css('height', autoHeight);
    }, 10);
    
    // 过渡结束后重置高度为auto，适配内容变化
    setTimeout(() => {
      $extraPanel.css('height', 'auto');
    }, 300);
  }
});

关键说明 #

• 用flex布局的flex-basis属性控制宽度变化，配合CSS过渡，让联系信息div的移动完全平滑，避免了布局重排导致的跳动。
• 手动控制额外面板的高度动画，是为了让它的展开/收起和联系信息的移动同步，保持整体动画的连贯性。
• 如果你的额外内容高度固定，可以简化高度动画的逻辑，直接用CSS过渡控制高度即可。

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