页面加载后淡入导航

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() 函数。

希望这会有所帮助。