jQuery - slideToggleのアニメーションがスムーズでない

Question

リンクの下にdivをリンクして上下にスライドさせるようにしようとしていますが、アニメーションが滑らかではありません。ここでは、コードは次のとおりです。

HTML：

<div> 
<a href="#" id="may2016" class="month_name"><h2>May 2016</h2></a> 
       <div class="archive_links" style="display:none;"> 
        <p>Hello, 30. May 2016. 17:33</p> 
        <p>New One, 22. May 2016. 11:14</p> 
        <p>Third, 17. May 2016. 04:30</p> 
       </div> 
</div> 
<div> 
      <a href="#" id="april2016" class="month_name"><h2>April 2016</h2></a> 
       <div class="archive_links" style="display:none;"> 
        <p>Hello, 30. May 2016. 17:33</p> 
        <p>New One, 22. May 2016. 11:14</p> 
        <p>Third, 17. May 2016. 04:30</p> 
       </div> 
</div> 

CSS：

div.archive_links { 
      background:rgba(255,255,255, .15); 
      padding:5px; 
     } 

     a.month_name { 
      text-decoration:none; 
      color:white; 
      transition:color .4s ease; 
     } 

     a.month_name:hover { 
      color:#c7c7ee; 
      transition:color .4s ease; 
     } 

はJavaScript：

$(document).ready(function() { 
     $("#may2016").on('click', function() { 
      $(this).next(".archive_links").slideToggle(1000); 
     }); 

     $("#april2016").on('click', function() { 
      $(this).next(".archive_links").slideToggle(1000); 
     }); 
    }); 

ここjsFiddleです。 誰かを助けることができますか？

Answer 1

いいですね。唯一の唯一の詳細は、冒頭の小さな「ジャンプ」です。これは、jQueryがdisplay〜blockをターゲットに設定したときに、pのマージンがすぐに表示されるためです。マージンを取り除くか、pをdivの内側に置き、代わりにdivをアニメーション化してください。