title: How to fadeIn parent div along with the child?
body: <p>Currently I have a <code>div</code> container <code>#songs</code> with a <code>list</code> which is wrapped in parent <code>div</code> <code>#guts</code>. I am appending new list elements using jQuery <code>appendTo()</code> method. On append I use <code>fadeIn()</code> method, however that only animates the <code>#songs</code> <code>div</code>.</p>
  
  <p>My question is, how can I animate the parent <code>div</code> at the same time so that once the new element is added the parent <code>div</code> <code>#guts</code> extends smoothly?</p>
  
  <p>This is the example code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="jumbotron" id="guts"&gt;
      &lt;button type="button" id="add-btn"&gt;Add to playlist&lt;/button&gt;
      &lt;div id="songs"&gt;
          &lt;ul&gt;
              &lt;li&gt;Some list element&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function () {
      $("#add-btn").click(function(){
          var new_el = "&lt;li&gt;New element&lt;/li&gt;";
          $(new_el).appendTo("#songs").hide().fadeIn();
      });
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.jumbotron {
      padding-top: 30px;
      padding-bottom: 30px;
      margin-bottom: 30px;
      background-color: #eee;
  }
  </code></pre>
  
  <p>And <a href="https://jsfiddle.net/laurynasas/12jx9fgL/3/" rel="nofollow noreferrer">fiddle</a>:</p>