Animate to top value when element has a bottom value

I am trying to animate an element that is absolutely positioned and positioned bottom and left to a position top and right.

CSS

.obj{
  position: absolute;
  bottom: 0;
  left: 200px; 
}

JS

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

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.

EDIT: It seems to clear the bottom and left value, then animates from top: 0, right: 0.

Also, I can't put the .css() in the complete funct开发者_JAVA技巧ion of the .animate() because the current bottom and left positioning affects how it animates.

Thanks for your help!

---

You can base your animation relative to the starting location, or in this case the bottom left to get it to slide better in chrome.

$('div.obj').click(function(event){
    var obj = $(this);
    var top = obj.context.offsetTop;
    var right = obj.context.offsetParent.clientWidth - (obj.context.offsetLeft*2);
    obj.animate({bottom:top+'px', left: right+'px' }, 400);
});

---

You should use a timeout function on the effect o that the CSS has time to load :) Google it :)

---

$(this.animate({top:'15%', right: '300px' }, 400).css({'bottom': '', 'left': ''});

Should be:

$(this).animate({top:'15%', right: '300px' }, 400).css({'bottom': '', 'left': ''});

should it not?