jquery - 平滑地将 div 动画到特定位置

Question

我试图在单击链接时使 div 向下移动到特定点，然后在用户返回主页时返回其原始点。

站点结构是一个主页，然后是几个隐藏的 div，这些 div 根据您单击的链接隐藏/显示。

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

我试过使用它（我不完全确定如何使用 .animate() 因为我只将它与背景属性一起使用，但我认为这会起作用）：

var btns = $('#navbuttons');

btns.animate({
    bottom: 50
});

当我使用它时，我试图将元素从底部移动 50px，但是它不起作用。我摆弄了一些动画函数，但是只出现了语法错误（我尝试使用类似-=50px的东西）。

我也尝试过在 animate 函数中使用 css 函数，但是它仍然不起作用。

更新：我尝试了两个答案建议，但是我无法让它工作。我在这里粘贴了相关代码。

score 2 · Accepted Answer

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

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

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

#navbuttons {
    position: relative;
}

score 1 · Accepted Answer

你很接近。您只需将您的值放在引号中并添加像素。

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

您可能还需要确保您的 Div具有指定的位置。如果没有绝对定位或固定，[bottom|top|left|right] 将不起作用。

所以在你的 CSS 中确保

#navButtons{
   position: absolute;
}

或者

#navButtons{
   position: fixed;
}

2 回答 2