title: Animate the display of dynamically added html
body: <p>I couldn't find this solution anywhere.</p>
  
  <p>The user makes selections and enters some values. When he clicks to add, I want the html that's added with jQuery to animate (or slide down) into view. How would the element height be retrieved in order to set the value?</p>
  
  <p>This is the parent;</p>
  
  <pre><code>&lt;div class="order-summary-wrap"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This code works but it's jarring.</p>
  
  <pre><code>// build the summary boxes from the users inputs
  function create_summary(){
      var summary_html = '';
  
      if( $('.cycle-01').hasClass('cycle-slide-active') ){
          summary_html = '&lt;div class="toll-free-summary-contents remove-me"&gt;&lt;p class="line-one"&gt;&lt;span class="new-toll-free-number"&gt;' + $('.cycle-01 .step-2-container .number').find("option:selected").attr("value") + '&lt;/span&gt; in &lt;span class="from-toll-free-country"&gt;' + $('.cycle-01 .step-1-container .country').find("option:selected").attr("value") + '&lt;/span&gt; will ring to &lt;span class="forward-to-number"&gt;' + $('.cycle-01 .step-3-container .country').find("option:selected").attr("value") + '&lt;/span&gt; in &lt;span class="to-toll-free-country"&gt;' + $('.cycle-01 .step-4-container #ForwardNumberTo').attr("value") + '&lt;/span&gt;&lt;/p&gt;&lt;p class="line-two"&gt;&lt;span class="toll-free-cost"&gt;' + $('.billing-options-hidden').find("option:selected").attr("value") + '&lt;/span&gt; (FIRST MONTH FREE) with each minute used costing  &lt;span class="toll-free-per-minute-cost"&gt;' + $('.per-minute').text() + '&lt;/span&gt;&lt;/p&gt;&lt;div class="remove"&gt;&lt;a class="remove-link" href="#"&gt;Remove&lt;/a&gt;&lt;a class="view-link" href="#"&gt;View Sample Bill&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;';
      } else {
          summary_html = '&lt;div class="local-summary-contents remove-me"&gt;&lt;p class="line-one"&gt;&lt;span class="country-local-number"&gt;' + $('.cycle-02 .step-1-container .country').find("option:selected").attr("value") + '&lt;/span&gt;  &lt;span class="state-local-number"&gt;' + $('.cycle-02 .step-2-container .state').find("option:selected").attr("value") + '&lt;/span&gt;  &lt;span class="city-local-number"&gt;' + $('.cycle-02 .step-3-container .city').find("option:selected").attr("value") + '&lt;/span&gt;  &lt;span class="new-local-number"&gt;' + $('.cycle-02 .step-4-container .local').find("option:selected").attr("value") + '&lt;/span&gt;&lt;/p&gt;&lt;p class="line-two"&gt;&lt;span class="toll-free-cost"&gt;' + $('.billing-options-hidden').find("option:selected").attr("value") + '&lt;/span&gt; (FIRST MONTH FREE) with each minute used costing  &lt;span class="toll-free-per-minute-cost"&gt;' + $('.per-minute').text() + '&lt;/span&gt;&lt;/p&gt;&lt;div class="remove"&gt;&lt;a class="remove-link" href="#"&gt;Remove&lt;/a&gt;&lt;a class="view-link" href="#"&gt;View Sample Bill&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;';
      }
  
      $('.order-summary-wrap').append(summary_html);
      $('.add-more-numbers').removeClass('hidden');
  }
  
  // click event to dynamically add the summary boxes to the DOM
  $('.first-step, .add-number').click(function(e){
      create_summary();
  });
  </code></pre>
  
  <p>Also, when the "remove" link is clicked, I'd like for the element to animate as it's removed from the DOM.</p>
  
  <pre><code>// lets the user remove the number from the DOM
  $('.order-summary-wrap').on('click', '.remove-link', function(e) {
      e.preventDefault();
      $(this).parent().parent().remove();
  });
  </code></pre>