修复了使用 jQuery 淡入淡出时元素跳来跳去的问题

Question

每当我使用 jQuery 淡入一个元素时，其他元素垂直居中，有点跳来跳去。

以下是我的意思的精简示例：

$("#one").click(function(){
$("#two").fadeToggle();
});

body {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="one">Paragraph 1</p>
<p id="two">Paragraph 2</p>

单击第一段时，第二段淡出/淡入。

我想要实现的是，我希望它在这两个位置之间动画(滑动/滚动(，而不是跳来跳去。我该怎么做？

Answer 1

为避免跳跃，您可以使用slideToggle()：

$("#one").click(function() {
$("#two").slideToggle();
});

body {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="one">Paragraph 1</p>
<p id="two">Paragraph 2</p>

Answer 2

如果可以，请将第一段的位置设置为相对：

#one {
position: relative;
}

然后为第一段添加动画：

$('#one').animate({top: animationType + topPos + 'px'});

代码段：

$("#one").on('click', function() {
var topPos = Math.ceil($('#one').height());
var animationType = '+=';
if ($('#two').is(':not(:visible)')) {
animationType = '-=';
topPos = topPos;
}
$("#two").fadeToggle();
$('#one').animate({top: animationType + topPos + 'px'}, 800);
});

body {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#one {
position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="one">Paragraph 1</p>
<p id="two">Paragraph 2</p>