Animate to top value when element has a bottom value
<p>I am trying to animate an element that is absolutely positioned and positioned bottom and left to a position top and right.</p>

<p>CSS</p>

<pre><code>.obj{
  position: absolute;
  bottom: 0;
  left: 200px; 
}
</code></pre>

<p>JS</p>

<pre><code>$('.obj').click(function(event){
    $(this).animate({top:'15%', right: '300px' }, 400).css({'bottom': '', 'left': ''});
});
</code></pre>

<p>The problem with what I currently have is that some browsers (Chrome/Safari) will fire the CSS as it animates which leads to the object jumping across the screen.</p>

<p><strong>EDIT:</strong> It seems to clear the bottom and left value, then animates from <code>top: 0, right: 0</code>.</p>

<p>Also, I can't put the <code>.css()</code> in the complete function of the <code>.animate()</code> because the current bottom and left positioning affects how it animates.</p>

<p>Thanks for your help!</p>
