尺寸变化时，可以顺畅地向上或向下滑动

Question

我制作了两个与.square相关的按钮<div> 如果我点击一个按钮.square：相关<div>出现，另一个消失。

事情是：
当bellow_div或#c1的高度发生变化时，我（#c2）之后显示的内容正在进行奇怪的转换。

如何更改高度时，可以向上或向下滑动bellow_div和#c1或#c2吗？

$(function(){ // DOM ready shorthand
$('.square:first').css('color', 'red');
                 
$(".square").on("click", function() { 
 
    var id= $(this).attr("contentId");
        $('.square').css('color', ' #ccc');
    $(this).css('color','red');

    $('#details p').fadeOut('fast', function() {
      $(this).html($("#" + id).html()).fadeIn();
    });


});



});

#details{
    width:100%;
    background:#999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square" contentId="c1">Prochain évenement</div>
<div class="square" contentId="c2">Editorial</div>

<div id="details">
<p>
Jeudi 20 Mars<br>
20h30<br>
                                    
Upcoming eventsSed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?
</p></div>

<div style="display: none" id="c1">

Jeudi 20 Mars<br>
20h30<br>                           
Upcoming eventsSed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?
</div>

<div style="display: none" id="c2">
Saison 2016—2017

</div>

<div class="bellow_div">Here is a text</div>

Answer 1

使用.slideUp()和.slideDown() jQuery函数。

＆＃13;

＆＃13;

$(function(){ // DOM ready shorthand
$('.square:first').css('color', 'red');
                 
$(".square").on("click", function() { 
 
    var id= $(this).attr("contentId");
        $('.square').css('color', ' #ccc');
    $(this).css('color','red');

    $('#details p').slideUp().fadeOut('fast', function() {
      $(this).html($("#" + id).html()).slideDown().fadeIn();
    });


});



});

＆＃13;

#details{
    width:100%;
    background:#999;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square" contentId="c1">Prochain évenement</div>
<div class="square" contentId="c2">Editorial</div>

<div id="details">
<p>
Jeudi 20 Mars<br>
20h30<br>
                                    
Upcoming eventsSed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?
</p></div>

<div style="display: none" id="c1">

Jeudi 20 Mars<br>
20h30<br>                           
Upcoming eventsSed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?
</div>

<div style="display: none" id="c2">
Saison 2016—2017

</div>

<div class="bellow_div">Here is a text</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

检查the Executing Code When an Animation Ends部分here