固定元素在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>