使用jQuery UI滑动切换内容 反向操作时内容错位问题求助

解决滑动推挤问题 #

反向滑动时内容被推挤，核心原因是#changeName和.profileBox的垂直布局会因元素显示/隐藏触发重排，导致布局跳动。解决思路是让两个滑动元素共享同一垂直空间，避免布局重排：

1. 调整HTML结构
   将.profileBox和#changeName放入同一父容器，确保它们在同一层级空间内切换：

<div id="profile" style="display: block;">
  <i id="backer" class="fa fa-arrow-left" aria-hidden="true" style="display: none;"></i>
  <div class="first">
    <img src="https://i.sstatic.net/eSStq.png?s=256&g=1" height="100">       
    <p style="margin:0;">TEXT</p>
  </div>
  <div id="slideContainer" class="superFlex">
    <form id="changeName" class="swiped" style="display: none;">
      <p class="general">Username</p>
    </form> 
    <div class="profileBox" style="">   
      <p class="general">Account settings</p>
      <div class="usercon" id="cu"><p>Change username</p></div>
    </div>    
  </div>
</div>

2. 修改CSS规则
   设置滑动容器为overflow:hidden，并让两个滑动元素占据100%宽度，避免垂直空间变化：

#slideContainer {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.profileBox, #changeName {
  width: 100%;
  flex-shrink: 0; /* 防止元素被压缩变形 */
}
/* 保留原有CSS，补充以上样式 */

3. 优化JS动画逻辑
   使用$.when()同步两个动画，确保滑动切换的连贯性，避免顺序导致的布局跳动：

$("#cu").click(function(){
  $.when(
    $(".profileBox").toggle('slide', { direction: 'left' }, 500),
    $("#changeName").toggle('slide', { direction: 'right' }, 500)
  ).done(function(){
    $("#backer").toggle('slide', { direction: 'right' }, 300);
  });
});
$("#backer").click(function(){
  $.when(
    $("#changeName").toggle('slide', { direction: 'right' }, 500),
    $("#backer").toggle('slide', { direction: 'right' }, 300)
  ).done(function(){
    $(".profileBox").toggle('slide', { direction: 'left' }, 500);
  });
});

解决图片固定位置问题 #

要让图片不跟随滑动且不使用position:absolute，只需将图片容器从滑动流中分离：

• 调整HTML结构，把.first（图片部分）移出滑动容器，直接放在#profile下。
• 利用flex布局让图片容器固定在顶部，滑动容器占据剩余空间：

#profile {
  /* 原有样式不变，添加以下 */
  display: flex;
  flex-direction: column;
}
.first {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}
#slideContainer {
  flex: 1; /* 占据容器剩余空间 */
  overflow-y: auto; /* 内容过多时可滚动 */
}

修改完成后，图片会固定在顶部不跟随滑动，同时滑动切换时不会出现内容推挤的问题。

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