Question

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 function of the .animate() because the current bottom and left positioning affects how it animates.

Thanks for your help!

Answer 1

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);
});