は、サイズが変更されたときにスムーズに上下にスライドします

Question

に関連する2つのボタン.squareを作成しました。
ボタンを1つクリックすると.square：関連<div>が表示され、もう1つが消滅します。

事である：私は（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

チェックthe Executing Code When an Animation Endsセクションhere

Answer 2

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