使用 jquery ui 来回滑动切换

Question

我使用 Jquery UI 向左滑动内容，然后同时滑动其他内容以取代第一个内容的位置。当我第一次按“更改用户名”时，它按预期工作。但是，当我想要反转

slideToggle

时，我的新内容会下推第一个内容，这会导致内容滑动然后弹出。我怎样才能避免这种情况？

我也不希望图像滑动。它应该留在原来的位置。

position: absolute

也不是一个选择。

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

});

#profile {
width: 75%;
max-width: 400px;
height: 100%;
background-color: rgba(37, 76, 91, 1);
position: fixed;
top: 0;
display: none;
right: 0;
}
#backer {
font-size: min(3.0vw, 22px);
position: absolute;
margin: 5px;
width: 100%;
display: none;
}
.superFlex, .profileBox {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.usercon, #changeName {
width: 100%;
height: 40px;
display: flex;
background-color: #4E748B;
font-size: 14px;
margin-top: 2px;
cursor: pointer;
}
.profileBox{
width:100%;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="profile" style="display: block;">
  <i id="backer" class="fa fa-arrow-left" aria-hidden="true" style="display: none;"></i>
    <div class="superFlex">
    <div class="first">
      <img src = "https://i.stack.imgur.com/eSStq.png?s=256&g=1" height = "100">       
      <p style="margin:0;">TEXT</p>
    </div>
    <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>

Answer 1

我认为 jQuery UI 的 .toggle 方法 是不适合这项工作的工具。

.toggle()

用于显示/隐藏单个元素，而不是用于向左或向右移动网格中的内容单元格。

我认为正确的概念模型是想象一个两倍于视口宽度的滑块框。它包含两张并排的幻灯片，每张幻灯片的宽度为滑块的一半（或与视口的宽度完全相同）。一次只能看到一张幻灯片。导航按钮将更改滑块的

margin-left

属性，以便第一张或第二张幻灯片处于视图中。

这需要对现有的 HTML 结构进行一些重新设计。例如，

#backer

箭头需要进入第二张幻灯片的内部。我们可以使用负数

margin-top

来显示在与原来大致相同的位置。

我们还需要将

overflow: hidden

添加到滑块的容器中 - 在本例中为

.superFlex

- 以便看不到视图之外的幻灯片。

生成的代码如下所示：

$('#cu').click(function() {
  $('#Slider').animate({
    marginLeft: '-100%'
  });
});

$('#backer').click(function() {
  $('#Slider').animate({
    marginLeft: '0'
  });
});

#profile {
  width: 75%;
  max-width: 400px;
  height: 100%;
  background-color: rgba(37, 76, 91, 1);
  position: fixed;
  top: 0;
  display: none;
  right: 0;
}

#backer {
  cursor: pointer;
  font-size: min(3.0vw, 22px);
  position: absolute;
  margin-left: 5px;
  margin-top: -155px;
}

.superFlex,
.profileBox {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.usercon,
#changeName {
  width: 100%;
  height: 40px;
  display: flex;
  background-color: #4E748B;
  font-size: 14px;
  margin-top: 2px;
  cursor: pointer;
}

.profileBox {
  width: 100%;
}

.slider {
  align-self: flex-start;
  display:flex;
  margin-left: 0;
  width: 200%;
}

.slide {
  width: 50%;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="profile" style="display: block;">
  <div class="superFlex" style="overflow:hidden;">
    <div class="first">
      <img src="https://i.stack.imgur.com/eSStq.png?s=256&g=1" height="100">
      <p style="margin:0;">TEXT</p>
    </div>
    
    <div class="slider" id="Slider">
      <div class="slide">
        <div class="profileBox">
          <p class="general">Account settings</p>
          <div class="usercon" id="cu">
            <p>Change username</p>
          </div>
        </div>
      </div>
      <div class="slide">
        <form id="changeName" class="swiped">
          <p class="general">Username</p>
        </form>
        <i id="backer" class="fa fa-arrow-left" aria-hidden="true"></i>
      </div>
    </div>
    
  </div>
</div>