title: jquery .animate makes object jump
body: <p>I have a really simple animation. I want div.box at (right:10px) to move to left:10px when it is clicked. The container width could be variable, so it's crucial that the left edge of the div always animates to left:10px. With the code below this does not work. I've successfully hacked a way for it to move by obtaining the width of <code>&lt;body&gt;</code> when the div is clicked and doing some calculations, but it and breaks down after the browser is resized. Is there a better way to accomplish this? I suspect the problem with the JS below stems from the fact that the position of div.box, <code>right: 10px;</code>, is not being removed after the JS runs.</p>
  
  <p><em><strong>JSFIDDLE:</em></strong> <a href="http://jsfiddle.net/5GL5r/15/" rel="nofollow">http://jsfiddle.net/5GL5r/15/</a> </p>
  
  <p><em><strong>CSS</em></strong></p>
  
  <pre><code>.box {
      width:100px;
      height:50px;
      background: red;
      position: absolute;
      right: 10px;
      top: 0;
      bottom: 0;
      margin: auto;
  }
  </code></pre>
  
  <p><em><strong>JS</em></strong></p>
  
  <pre><code>$(".box").click(function() {
      $(this).animate({left:"10px"});
  });
  </code></pre>