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?