title: Strange behaviour with jQuery animation
body: <p>I have a simple animation:</p>
  
  <pre><code>$(function () {
      $(".galleryButtonLeft").mousedown(function(){
          $("#theGallery").animate({ 
                marginLeft: "-=300px",
          }, 1000 );
      });
  });
  </code></pre>
  
  <p>theGallery is just a <code>div</code> with <code>position:relative</code>.</p>
  
  <p>Nothing fancy:</p>
  
  <pre><code>         &lt;div style="position:relative"&gt;
                &lt;img/&gt;
           &lt;/div&gt;
  </code></pre>
  
  <p>When I click my galleryButtonLeft to move it <code>300px</code> to the left, the page immediately goes to the top if I have my browser unmaximized and scroll to the middle of the page where my gallery sits. I want the page to stay where it is and not jump to the top everytime the button is clicked. How do I do that?</p>