title: Animate Automatic Resize of Form
body: <p>In HTML, I have a <code>form</code>, wrapped in a <code>div</code>. This <code>div</code> does not have an explicit <code>height</code> set in CSS, but instead chances <code>height</code> depending on the contents.</p>
  
  <p>When a user presses a button, a Javascript function adds several elements to the form. Again, no explicit <code>height</code> is dealt with; the <code>div</code> just resizes to fit its new contents.</p>
  
  <p>When a user presses another button, a Javascript function removes the first element from the form.</p>
  
  <p>Is there any way to smoothly animate these adjustments, using Javascript? The project currently uses jQuery, so anything built into that is available.</p>
  
  <p><strong>Demo Code:</strong></p>
  
  <pre><code>&lt;!--HTML FILE--&gt;
  &lt;!--...--&gt;
  &lt;button onclick="add_field();"&gt;ADD FIELD&lt;/button&gt;
  &lt;button onclick="del_field();"&gt;DEL FIELD&lt;/button&gt;
  &lt;div&gt;
      &lt;form&gt;
          &lt;input type="text" id="text_field"/&gt;
          &lt;input type="submit"/&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;!--...---&gt;
  </code></pre>
  
  <p><br/></p>
  
  <pre><code>//Javascript File
  function add_field()
  {
      $("&lt;input type='text'/&gt;").insertBefore($("#text_field"));
  }
  //...
  </code></pre>