title: JavaScript animate resizing div
body: <p>I'm trying to put a small animation on a page. I've got 2 divs side by side, the second of which has its content called via Ajax, so the div height varies without page refresh.</p>
  
  <pre><code>&lt;div id="number1" style="float:left; padding-bottom:140px"&gt;Static content, 200px or so&lt;/div&gt;
  &lt;div id="number2" style="float:left"&gt;AJAX content here&lt;/div&gt;
  &lt;div style="clear:left"&gt;&lt;/div&gt;
  &lt;img src="image" margin-top:-140px" /&gt;
  </code></pre>
  
  <p>This basically gives me a 2 column layout, and the image nests up underneath the left hand column no matter what the height. All good!</p>
  
  <p>The thing I'm trying to do though is animate the transition of the image when the page height changes thanks to incoming Ajax content. At present the image jerks around up and down, I'd quite like to have it smoothly glide down the page. </p>
  
  <p>Is this possible? I'm not really into my JavaScript, so I'm not sure how to do this. I'm using the jQuery library on the site, so could that be a way forward?</p>