Strange behaviour with jQuery animation
<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>
