页面加载后淡入导航
我正在尝试创建一个导航菜单，其中每个“按钮”在页面加载后按顺序淡入。我已经进行了大量的谷歌搜索，但还没有找到任何与我正在寻找的东西完全一样的东西。大多数都与按钮本身的动画有关（即悬停时更改字体颜色或背景颜色）。我想要的是，一旦页面加载，子菜单“按钮”就会在页面顶部淡入淡出。我觉得这可以简单地用CSS（也许还有javascript，虽然我不太擅长，所以请清楚地表达任何想法:-)）来完成，而不需要添加jquery。我没有使用任何花哨的软件，只是基本的 html 编码。
I'm trying to create a navigation menu where each "button" fades in in sequence after the page loads. I've done a bunch of google searching and have yet to come up with anything quite like what I'm looking for. Most have had to do with just animating the buttons themselves (i.e. change font color or background color when hovering). What I'm going for is that once the page loads, the sub menu "buttons" fade in across the top of the page. I feel like this could be done simply with CSS (and maybe javascript, though I'm not so good with that, so please be very clear with any ideas :-)), without the need to add in jquery. I'm not using any fancy software, just basic html coding.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您考虑过 jQuery 吗？ jQuery 有一个您可能感兴趣的
fadeIn函数，以及许多其他很酷的东西。这是我认为您想要使用 jQuery 的示例。
http://jsfiddle.net/ngzmy/1/
正如其他人所说，您的另一个选择是CSS 过渡，并非所有浏览器都支持。
Have you considered jQuery? jQuery has a
fadeInfunction that might be of interest to you, as well as many other cool things.Here is an example of what I think you want using jQuery.
http://jsfiddle.net/ngzmy/1/
As others have said, your other option would be CSS transition, which are not support in all browsers.
您可以仅使用 CSS 动画来做到这一点，但它并不适用于所有浏览器。设置动画，然后为每个按钮分配逐渐更长的延迟时间。但这可能不是您想要的确切外观。
如果您走 js 路线，您将能够使其在跨浏览器上更好地工作。我建议你继续使用 jquery - 它并不大，而且它使这样的任务变得更容易。我会这样处理你的问题：
您的淡入函数应该只是一个为其传递的元素设置不透明度的循环。每次迭代都应将不透明度增加一定量，并在迭代之间有适当的延迟。如前所述，jquery 带有 fadeIn() 函数。
希望这有帮助。
You can do this with just CSS animations but it's not going to work in all browsers. Set up an animation then assign each button progressively longer delay times. This might not be the exact look you want though.
If you go the js route you'll be able to make it work better cross browser. I would suggest you go ahead and use jquery - it's not huge and it makes tasks like this way easier. I would approach your problem like this:
Your fade-in function should just be a loop that sets opacity for the element it was passed. Each iteration should increase the opacity by a set amount with an appropriate delay between iterations. As mentioned, jquery comes with a fadeIn() function.
Hope this helps.