页面加载后淡入导航

Question

我正在尝试创建一个导航菜单，其中每个“按钮”在页面加载后按顺序淡入。我已经做了一堆谷歌搜索，还没有想出任何我想要的东西。大多数只需要动画按钮本身（即悬停时更改字体颜色或背景颜色）。我想要的是，一旦页面加载，子菜单“按钮”就会在页面顶部淡入淡出。我觉得这可以简单地使用CSS（也许是javascript，虽然我不是很好，所以请非常清楚任何想法:-)），而不需要添加jquery。我没有使用任何花哨的软件，只是基本的HTML编码。

Answer 1

您考虑过jQuery了吗？ jQuery有一个fadeIn函数可能会让你感兴趣，以及许多其他很酷的东西。

以下是我认为您想要使用jQuery的示例。 http://jsfiddle.net/ngzmy/1/

正如其他人所说，你的另一个选择是CSS过渡，这在所有浏览器中都不支持。

Answer 2

您只需使用CSS动画即可完成此操作，但它无法在所有浏览器中使用。设置动画然后逐步分配每个按钮延迟时间。这可能不是你想要的确切外观。

如果你走js路线，你将能够通过浏览器更好地工作。我建议你继续使用jquery - 它不是很大，它使这样的任务变得更容易。我会像这样处理你的问题：

1. 为所有按钮设置初始状态为opacity = 0。 （编辑：或不。见下面的评论。）
2. 按顺序为每个按钮调用淡入功能，如果需要，可以在它们之间留出适当的几毫秒延迟。

你的淡入功能应该只是一个循环，为它传递的元素设置不透明度。每次迭代都应该将不透明度增加一定量，迭代之间有适当的延迟。如上所述，jquery附带了一个fadeIn（）函数。

希望这有帮助。