title: Problem with div element jumping up a few pixels in JQuery animation
body: <p>I'm using the latest version of JQuery and trying to animate a div to the left of the screen. It's just about fine, except that it jumps up noticeably before actually animating. I've set it up in jsFiddle here <a href="http://jsfiddle.net/ns6string/agY2z/" rel="nofollow">http://jsfiddle.net/ns6string/agY2z/</a>
  Be sure to click on either 'portfolio' or 'about' to see what I'm dealing with.</p>
  
  <p>You can see the code I've set up (I tried to clean it up) but here it is again, in case anyone doesn't feel like hitting the jump ;)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
          &lt;div id="header"&gt;
          HOME
          &lt;/div&gt;
          &lt;div id="menu"&gt;
              &lt;div id="portfolio"&gt;
                  &lt;h3 class="menuitem" &gt;Portfolio&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div id="about"&gt;
                  &lt;h3 id="about" class="menuitem"&gt;About&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{ right: 0px; left: 0px; bottom: 0px; top: 0px; position: fixed; color: #444444; margin: 0px; background-color: #c7c7c7; font-size: 12px; font-family: Arial, Helvetica, sans-serif;}
  #menu{ text-shadow: 1px 1px 3px white; position: fixed; margin-top:220px; width: 200px; margin-right: auto; margin-left: auto; right: auto; left: 47.5%; }
  .menuitem{ display: inline-block; text-align: left; }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function() {
      //Hovering stuff went here, shouldn't be relevant
  
  
      $(".menuitem").click(function() {
          $("#menu").animate({
              'top': '10%',
              'left': '7%'
          }, {
              duration: 500,
              queue: false
          }, function() {})
      });
  });
  </code></pre>