平滑地将div设置为特定位置的动画

Question

我试图在点击链接时将div移动到特定点，然后在用户返回主页面时返回到原始点。

网站结构是一个主页面，后面是几个隐藏的div，它们会根据您点击的链接隐藏/显示。

基本上，我如何为div设置动画，使其平滑移动到特定位置？

我已经尝试过使用它（我不确定如何使用.animate（），因为我只使用了背景属性，但我认为这样可行）：

var btns = $('#navbuttons');

btns.animate({
    bottom: 50
});

当我使用它时，我试图从底部移动元素50px，但它不起作用。我略微使用了animate函数，但是只有语法错误（我尝试使用类似-=50px之类的东西）。

我也试过在animate函数中使用css函数，但是它仍然没有用。

更新：我尝试了两个答案建议，但是我无法让它发挥作用。我粘贴了相关代码here。

Answer 1

要使div向下移动50px，这应该有效：

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

但是，您可能需要先将其位置设置为相对位置（在CSS中）：

​#navbuttons {
    position: relative;
}​

示例：http://jsfiddle.net/grc4/XUdt9/

Answer 2

你非常接近。您只需要将值放在引号中并添加像素。

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

您可能还需要确保您的Div has a position specified。没有绝对定位或固定，[bottom | top | left | right]将无效。

所以在你的CSS中确保

#navButtons{
   position: absolute;
}

或

#navButtons{
   position: fixed;
}