Question

I’m trying to make a div move down to a specific point when a link is clicked, then back to its original point when the user goes back to the main page.

The site structure is a main page, followed by several hidden divs that are hidden/shown based on the link you click.

Basically, How can I animate a div so it smoothly moves to a specific position?

I’ve tried using this (I’m not exactly sure how to use .animate() as I’ve only used it with a background property, but I thought this would work):

var btns = $('#navbuttons');

btns.animate({
    bottom: 50
});

When I used this, I was attempting to move the element 50px from the bottom, however it didn’t work. I fiddled around with the animate function for a little, however only got syntax errors (I tried using things like -=50px and things like that).

I had also tried using the css function inside the animate function, however, it still didn’t work.

Update: I tried both of the answers suggestions, however I’m unable to get it to work. I pasted the related code here.

Answer 1

To make the div move down by 50px, this should work:

btns.animate({
    top: '+=50px'
});

However, you will probably need to set its position to relative first (in CSS):

​#navbuttons {
    position: relative;
}​

Example: http://jsfiddle.net/grc4/XUdt9/