jQuery Animate Upwards

Question

I have an issue where I have a div that is positioned absoutely and I want to animate it off the page upwards (I'm animating a person jumping off the screen).

However, I need the element to be bottom: 0, but when I want the animation to finish I want the image to have top: -600px.

When I write

$("#jumper").animate({ 
    top: "-600px"
}, 2000, 'easeInBack' );   

it sets top top to 0 and then starts the animation.

Perhaps there is a way to get the ypos of the element and set top with jQuery.css() on window load?

What should I do here?

Answer 1

Here is an example with your code : http://www.jsfiddle.net/fJKah/

looks to work as expected to me. maybe something else is interfering ..

Answer 2

How about just animating the bottom property? You could get the height of the document, then add 600 to it.

http://jsfiddle.net/kavY4/

var height = $(document).height();

$("#jumper").animate({ 
    bottom: height + 600
}, 2000, 'easeInBack' ); ​

Otherwise, you run into browser specific issues where the top is calculated to be auto, and the animation tries to start from that position (which ends up being 0, I guess).

To make that work you would have to get the top position of #jumper and set the top property to that value manually before you animate.

var top = $('#jumper').offset().top;

$("#jumper").css({top:top, bottom:'auto'})
.animate({ 
    top: -600
}, 2000, 'easeInBack' ); 

EDIT: The second example required bottom to be set to auto as well.

http://jsfiddle.net/kavY4/1/