javascript - 当尺寸改变时平滑地向上或向下滑动

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 函数。

$(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();
    });


});



});

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