调用 slideUp() 时 div 向左移动

Question

我有一个页面，它有一个包含两部分的表单，一个是显示的，一个是当用户按下第一个 div 中的按钮时隐藏的，它使用 slideUp() 向上滑动，隐藏的 div 使用 slideDown 向下滑动()，问题是当第一个 div 向上滑动时，它向左移动一秒钟，直到隐藏的 div 向下滑动，然后它返回到正常位置，我知道这是因为我在表单旁边有另一个 div，因为它如果我删除它可以正常工作，我不知道是什么原因造成的，请帮忙。

div

<div class="tips">

 //irrelevant                   

 </div> 

 <form action="rideHandler.php" method="POST" id="tripinfo">
   <div class ="choosing" id="choosing" >
    
     <button type="button" class="subBtn" id="show"> Finish up</button>
   </div>
   

  <div class="confirmation" id="confirmation" style ="display:none";>

  </div>

</form>

javascript

$('#show').click(function(e) {
     
 $("#choosing").slideUp();
 $("#confirmation").slideDown();

CSS

.tips{
    background-color: white;
    display:inline-block;
    float: right;
    width:20vw;
    height:35vw;
    padding:80px;
    margin-right:50px;
    text-align: center;
    border: 2px solid;
    border-width: 3px 4px 3px 5px;
    border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
    transform: rotate(2deg);
    margin-top:90px;
    
}

.choosing, .confirmation{
      margin: 0 auto;
      margin-bottom: 40px;
      padding:20px;
      width:35vw;
      text-align: center;
      background-color: whitesmoke;
      border: 3px solid;
      margin-top:100px;
}

Answer 1

jQuery 实现slideUp() 的方式似乎与您的auto 方面margins 不一致。我在下面的示例中通过使用calc 来设置侧面margins 来修复它，但是您可能可以使用flex 完成类似的结果。

$('#show').click(function(e) {

  $("#choosing").slideUp();
  $("#confirmation").slideDown();
})

.tips {
  background-color: white;
  display: inline-block;
  float: right;
  width: 20vw;
  height: 35vw;
  padding: 80px;
  margin-right: 50px;
  text-align: center;
  border: 2px solid;
  border-width: 3px 4px 3px 5px;
  border-radius: 95% 4% 92% 5%/4% 95% 6% 95%;
  transform: rotate(2deg);
  margin-top: 90px;
}

.choosing,
.confirmation {
  margin: 0 calc(50% - 17.5vw); /* changed this line */
  margin-bottom: 40px;
  padding: 20px;
  width: 35vw;
  text-align: center;
  background-color: whitesmoke;
  border: 3px solid;
  margin-top: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tips">

  //irrelevant

</div>

<form action="rideHandler.php" method="POST" id="tripinfo">
  <div class="choosing" id="choosing">

    <button type="button" class="subBtn" id="show"> Finish up</button>
  </div>


  <div class="confirmation" id="confirmation" style="display:none" ;>

  </div>

</form>

Answer 2

只需删除 float 和 inline 属性。 并正确使用边距对齐.tips 块。

$('#show').click(function(e) {
  e.preventDefault();
  $("#choosing").slideUp();
  $("#confirmation").slideDown();
});

.tips {
  background-color: white;
  width: 20vw;
  height: 35vw;
  padding: 80px;
  margin: 0 50px 0 auto;
  text-align: center;
  border: 2px solid;
  border-width: 3px 4px 3px 5px;
  border-radius: 95% 4% 92% 5%/4% 95% 6% 95%;
  transform: rotate(2deg);
  margin-top: 90px;
}

.choosing,
.confirmation {
  margin-bottom: 40px;
  padding: 20px;
  width: 35vw;
  text-align: center;
  background-color: whitesmoke;
  border: 3px solid;
  margin-top: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tips">

  //irrelevant

</div>

<form action="rideHandler.php" method="POST" id="tripinfo">
  <div class="choosing" id="choosing">

    <button type="button" class="subBtn" id="show"> Finish up</button>
  </div>


  <div class="confirmation" id="confirmation" style="display:none" ;>

  </div>

</form>