CODEWITHSUNDEEP
jqueryhtmlcss
Mythrillic
Mythrillic

Reputation: 417

smoothly animate a div to a specific location

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.

Upvotes: 0

Views: 1382

Answers (2)

Josh
Josh

Reputation: 44916

You are pretty close. You just need to put your value in quotes and add pixels.

btns.animate({
   bottom: '50px'
});

You will probably also need to make sure your Div has a position specified. Without being absolutely positioned, or fixed, the [bottom|top|left|right] will have no effect.

So in your CSS just make sure

#navButtons{
   position: absolute;
}

or

#navButtons{
   position: fixed;
}

Upvotes: 1

grc
grc

Reputation: 23575

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/

Upvotes: 2

Related Questions