我使用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>