jQuery animate bottom div
<p>I try to move a specific <code>div</code> using jQuery <code>animate</code>. However, It does not work for div, but it works for <code>img</code>.
Here's my code (it doesn't work):</p>

<pre><code>&lt;body&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
    $('#clickme').hover(function() {
      $('#lol').animate({
        bottom: '+=100',
        left: '+=100'
      }, 5000, function() {
        // Animation complete.
      });
    });
});
&lt;/script&gt;
&lt;div id="clickme"&gt;
  Click here
&lt;/div&gt;
&lt;div id="lol" style="width: 500px; border: 1px solid #000; display: block;"&gt;aaaaaa&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>But this one, will work:</p>

<pre><code>&lt;body&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
    $('#clickme').hover(function() {
      $('#book').animate({
        bottom: '+=100',
        left: '+=100'
      }, 5000, function() {
        // Animation complete.
      });
    });
});
&lt;/script&gt;
&lt;div id="clickme"&gt;
  Click here
&lt;/div&gt;
&lt;img id="book" src="http://img.labnol.org/images/2008/03/firefox-google-logo.jpg" alt="" width="266" height="113"
  style="position: relative; left: 10px;" /&gt;

&lt;/body&gt;
</code></pre>
