jQuery .animate() change top with bottom property

Question

I am building a menu in jQuery using .animate() but I've run into a problem. I have a div that initially loads with position:fixed and bottom:30px. Upon click of a link, I want my div to move to the height position of that link. Essentially, I have this:

http://jsfiddle.net/wRjyK/32/

The problem is that the first animation initially moves from off of the top of the screen in a downward motion. (Because it doesn't have a top property) I want the animation to start with its current position. When I repeat the animation with other links, it looks fine because my div now has the proper top property to work off of.

A simple fix would be to change the css of my div to have a top property, but my design requires the bottom property. Any ideas?

For what it's worth, the first animation in your fiddle correctly moves the <div> upwards on Firefox 5. — Frédéric Hamidi
Yeah I noticed that just a second ago. However, that is the only browser that I know of that works. — aus
the demo on jsfiddle seems to work fine as it is (I used FF 5). which browser did you test it on? — arviman
Seems to work on FF 3.6 too. But not on Chrome 15.0.849.0 dev-m or IE8. (And Safari, I think. Not at my dev machine) Bug in jQuery perhaps? Or just browser incompatibility? — aus
Works when I changed the css from bottom: 20px; to top: 400px in Chrome. This may possibly be a duplicate of stackoverflow.com/questions/2986353/… — Caimen

maxedison maxedison · Accepted Answer · 2011-08-17T18:29:02

There are a few keys to making this work. Here's a jsFiddle example.

$('a').click(function(){
    var offsetTop = $(this).offset().top;
    var footerOffsetTop = $('.footer').offset().top;
    $('.footer').css({position:'absolute',bottom:'',top:footerOffsetTop})
        .animate({top:offsetTop},500);
});

It essentially works like this:

Find the footer's offset().top value
Change the footer's CSS so that it is absolutely positioned with the top: property having the value found in #1. This keeps allows you to animate it's top property, without having it jump.

jQuery .animate() change top with bottom property

1 Answers