jquery - 如何淡入整个网页——可访问

客户要求他们的主页开始为空白(仅可见 Logo 和背景图像)，然后在一两秒后淡入导航和内容。

我可以从通过 CSS 隐藏的内容开始，然后使用 jQuery 淡入淡出。不幸的是，这违反了渐进增强:在事件代码运行之前，该网站将完全无法使用，从而给使用屏幕阅读器的视障人士带来问题。

我考虑过的两种解决方法是 Flash 和 <noscript>标签。 Flash 似乎有些过分了，因为网站的其他地方没有使用它；此外，主页内容丰富，有一组不断更新的新闻项目，有点像一个轻型博客。 <noscript>标签不会帮助使用屏幕阅读器的视障人士，因为他们的浏览器通常启用了脚本。

我是否缺少解决方案？或者这不是一个好主意？

最佳答案

执行以下操作

<html>
....
<body>
<script>$("body").addClass("hide");</script>
...

有了这个CSS

body.hide #myHidden-div{
  opacity: 0;
}

然后暂停两秒后，您应该能够执行 $("#myHidden-div").fadeIn();

如果用户禁用了 js，则 addClass标签永远不会被触发，并且不会隐藏任何内容。我认为您不需要使用 <noscript>根本没有标签。

您必须确保脚本标记位于 <body> 之后这样用户就不会看到内容跳转然后突然隐藏。这比默认情况下隐藏所有内容要好，因为某些搜索引擎可能会注意到您隐藏了文本并出于垃圾邮件原因而忽略它。

关于jquery - 如何淡入整个网页——可访问，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7042670/