调用slideUp()时，div会向左移动

Question

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

divs

<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>