Javascript 设置“动画”；正文“；jQuery中的标记不起任何作用

因此，我的网站导航栏上的一个按钮从顶部向下显示一个灰色的小标签，告诉你有关该网站的信息。以下是我用于动画的代码：

var aboutMenu = function(){

    $(".aboutButton").click(function(){

        $("body").animate({top: "42px"}, 200);
        $(".about").animate({top: "0px"}, 200);

    });

}

$(document).ready(aboutMenu);

我的想法是，我的网站的主体，连同它的所有内容，向下移动42像素。这是在“about”类中的内容向下移动以便在屏幕上可见的同时进行的。如果你点击“关于”按钮，所有发生的是灰色标签向下移动，但身体停留在原来的位置。这通常不会是一个问题，除非选项卡遮挡了导航栏的其余部分

以下是一些更相关的代码（如果需要）：

HTML:

<div class = "about">

    <p align = "center">placeholder text</p>

</div>

.about{
    background-color: gray;
    top: -42px;
    height: 42px;
    position: fixed;
}

.about p{
    color: white;
}

.aboutButton{
    cursor: pointer;
}

---

正如我在评论中提到的，为了能够为

top

（或其他位置）设置动画，您需要设置

位置：…

（例如

位置：相对；

您可以尝试使用不同的方式调用函数，例如将此属性添加到链接：`onClick（aboutMenu（））

---

另外，试着在所有东西周围放置一个allcontent div，并设置动画，身体标签不适合动画

你的

身体

的CSS在哪里？它至少需要

位置：…

来设置

顶部

顶部，

底部

，

左侧

和

右侧

的动画与

一起工作位置

。你为

主体

定义了吗？@putvande，谢谢，解决了它。我将位置设置为相对位置，现在一切都好了。真的有必要为此撞上一篇四年的帖子吗？已经给出了一个非常有效的答案。这甚至没有提到你的答案不正确的事实。

.about{
    background-color: gray;
    top: -42px;
    height: 42px;
    position: fixed;
}

.about p{
    color: white;
}

.aboutButton{
    cursor: pointer;
}