Javascript 菜单项-单击“淡入淡出”和“淡出淡出” 我有一份由三个选项组成的菜单 单击其中一个会使容器div变为“FadeInDown” 然后，它的内容是“FadeIn” 单击另一个菜单项或页面上的任何其他位置会导致 内容到“淡出”，然后容器div到“淡出”

这是我一直在测试的小提琴

---

我对jQuery不是很熟悉，一直在尝试使用动画css来帮助我。感谢您提前提供的帮助和提示，欢迎您对编码提出批评：）

我的答案主要基于JQuery及其

动画功能（）。这是小提琴：

我使用JavaScript对象，如
fadeInDown
来设置容器的动画

var fadeInDown = {
    opacity:1,
    top: "50px"
};

我使用
animate
的
complete
回调函数使内容显示在容器后面

var fadeInDown = {
    opacity:1,
    top: "50px"
};

为了管理多个div（每个菜单项一个），我使用id作为选择器，但由于“单击并显示”功能保持不变，我使用了一个“构建器”：（这使用了一个闭包，因此如果您不熟悉JavaScript，您可能需要读几遍才能理解发生了什么）

这样，当您添加add the click回调时，您只需执行以下操作：

$(document).ready(function(){
    // note that menuClickCallbackBuilder(1) returns a function
    // again if you're not familiar with JS, you may have to re-read menuClickCallbackBuilder
    $('#menuLink1').on('click', menuClickCallbackBuilder(1)); 
    $('#menuLink2').on('click', menuClickCallbackBuilder(2));
    $('#menuLink3').on('click', menuClickCallbackBuilder(3));
});

您可以对此进行一些改进：


将持续时间因子化为一个变量（例如
animationdurationseconds
），这样，如果要更改动画的速度，只需更改一件事。（@Huangism:在你这么做之后，让动画变得更快，让它变得更有活力）

（来自@Huangism）：当人们在菜单上快速点击10次时，不要让它发疯

事实上，我认为你不需要3个不同的容器，你只需要一个容器就可以了（尽管我不知道这是否是一个改进）

可能有一种方法可以使用CSS类而不是
fadeInDown
和
fadeOutUp
JS对象。那会更干净，我认为你应该尽可能多地在CSS中保留样式

菜单项不需要不同的ID，您可以使用循环执行完全相同的操作

无论你的想象力想添加什么

嗨！是的，这正是我要找的！除了每个菜单都有自己的div之外。你的方法在所有浏览器中都能正常工作吗？好的，让我花点时间让它工作。如果你对它的工作原理有疑问，请告诉我这正是我想要的，谢谢你，保罗！如果我通读了，但仍然不理解，我会让你不断更新，并提出问题，尽管这看起来很酷，答案也不错。只要确保你（OP）实现了一些东西，当人们以非常快的速度在菜单上点击10次时，它就不会变得疯狂。此外，淡入淡出会导致站点的感知速度降低slow@Huangism：事实上，将您（非常好）的评论添加为“改进”，以便OP能够快速访问它。
$(document).ready(function(){
    // note that menuClickCallbackBuilder(1) returns a function
    // again if you're not familiar with JS, you may have to re-read menuClickCallbackBuilder
    $('#menuLink1').on('click', menuClickCallbackBuilder(1)); 
    $('#menuLink2').on('click', menuClickCallbackBuilder(2));
    $('#menuLink3').on('click', menuClickCallbackBuilder(3));
});