Question

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

var aboutMenu = function(){

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

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

    });

}

$(document).ready(aboutMenu);

我的想法是，我的网站的主体及其所有内容向下移动42像素。这是＆＃34;关于＆＃34;的内容。课程向下移动，以便在屏幕上显示。如果你点击＆＃34;关于＆＃34;按钮，所有发生的事情是灰色标签向下移动，但身体保持原样。这通常不会成为问题，除了标签会遮挡导航栏的其余部分。

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

HTML：

<div class = "about">

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

</div>

和实际链接：

<li> <a class = "aboutButton">About this website</a></li>

CSS：

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

.about p{
    color: white;
}

.aboutButton{
    cursor: pointer;
}

Answer 1

正如我的评论所述，为了能够为top（或其他位置）制作动画，您需要设置position: ...（例如position: relative;。

Answer 2

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

同时尝试在所有内容周围设置一个全部内容div并设置动画，身体标签对于动画来说效果不佳

在jQuery中设置“body”标签的动画不会做任何事情

2 个答案: