基于jQuery实现图片推开并平滑显示描述文本的技术问题

需求是点击一排图片时，图片能平滑推开，同时对应的描述文本流畅显示，无过渡间隙。但当前实现中图片瞬间位移，文本滑动有延迟，效果不连贯。

问题根源 #

原来的代码只通过jQuery UI的toggle('slide')处理描述文本的显示，图片所在容器的宽度变化没有添加过渡效果，flex布局下元素的尺寸变化默认是瞬间完成的，导致图片和文本的动画不同步。

修改后的完整实现 #

HTML结构调整 #

把每个图片和对应的描述包裹在同一个容器里，方便统一控制宽度变化：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer">
  <div class="img-wrapper">
    <div class="img">
      <img src="https://via.placeholder.com/640x400">
    </div>
    <div class="desc">
      Desc 1 ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis viverra urna sollicitudin lobortis at varius eros. Quisque sit amet sollicitudin nulla. Ut aliquet interdum neque id vehicula. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus aliquam, est sit amet vehicula tristique, erat magna placerat felis, vel maximus neque lacus at magna.
    </div>
  </div>
  <div class="img-wrapper">
    <div class="img">
      <img src="https://via.placeholder.com/640x400">
    </div>
    <div class="desc">
      Desc 2 ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis viverra urna sollicitudin lobortis at varius eros. Quisque sit amet sollicitudin nulla. Ut aliquet interdum neque id vehicula. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus aliquam, est sit amet vehicula tristique, erat magna placerat felis, vel maximus neque lacus at magna.
    </div>
  </div>
  <div class="img-wrapper">
    <div class="img">
      <img src="https://via.placeholder.com/640x400">
    </div>
    <div class="desc">
      Desc 3 ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet felis viverra urna sollicitudin lobortis at varius eros. Quisque sit amet sollicitudin nulla. Ut aliquet interdum neque id vehicula. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus aliquam, est sit amet vehicula tristique, erat magna placerat felis, vel maximus neque lacus at magna.
    </div>
  </div>
</div>

CSS样式优化 #

通过CSS过渡实现平滑的宽度变化，让图片和描述的动画同步：

.outer {
  display: flex;
  gap: 0;
  overflow: hidden;
}

.img-wrapper {
  display: flex;
  flex: 0 0 15%;
  transition: flex 0.4s ease;
}

.img {
  flex: 1;
  cursor: pointer;
}

.img img {
  width: 100%;
  display: block;
}

.desc {
  border: solid 1px #000;
  flex: 0 0 0;
  padding: 25px;
  overflow: hidden;
  transition: flex 0.4s ease;
}

.desc.active {
  flex: 0 0 35%;
}

.img-wrapper.expanded {
  flex: 0 0 calc(15% + 35%);
}

JavaScript逻辑调整 #

通过切换类名控制展开/收起状态，同时关闭其他已展开的项，避免布局混乱：

$(".img").on("click", function() {
  const wrapper = $(this).parent(".img-wrapper");
  const desc = wrapper.find(".desc");
  
  // 切换当前项的展开状态
  wrapper.toggleClass("expanded");
  desc.toggleClass("active");
  
  // 关闭其他已展开的项
  $(".img-wrapper").not(wrapper).removeClass("expanded");
  $(".desc").not(desc).removeClass("active");
});

实现说明 #

1. 用img-wrapper统一包裹图片和描述，通过修改wrapper的flex属性实现整体宽度变化，让图片和文本同步动画
2. 给img-wrapper和desc添加transition属性，实现0.4秒的平滑过渡
3. 移除了jQuery UI的slide动画，改用CSS过渡更流畅，避免JS动画的延迟问题
4. 点击时自动关闭其他已展开的项，保证界面整洁

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