如何在整个网页中淡出-易读

A client has asked that their home page begin blank (only the logo and background image visible) and then fade in the navigation and content after a second or two.

一个客户要求他们的主页开始是空白的(只有徽标和背景图像可见)，然后在一两秒钟后在导航和内容中淡出。

I could start with the content hidden via CSS and fade it in with jQuery. Unfortunately this violates progressive enhancement: the site would be completely unusable until active code runs, causing problems for the visually impaired using screen readers, among others.

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

The two work-arounds I've considered are Flash and the <noscript> tag. Flash seems overkill since it isn't used elsewhere on the site; also, the home page is content-heavy with a constantly updating set of news items, sort of a light blog. The <noscript> tag won't help the visually impaired who use screen readers, since their browsers usually have scripting enabled.

我考虑过的两个解决方案是Flash和

标签不能帮助使用屏幕阅读器的视障人士，因为他们的浏览器通常支持脚本。

Am I missing a solution? Or is this just not a good idea?

我是否遗漏了一个解决方案?或者这不是一个好主意?

5 个解决方案

#1

Do the following

请执行以下操作

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

With this css

这个css

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

Then after a two second pause you should be able to do $("#myHidden-div").fadeIn();

然后，在两秒钟的停顿之后，您应该能够执行$(“#myHidden-div”).fadeIn();

If the user has js disabled then the addClass tag will never be triggered and nothing will be hidden. I don't think you need to use <noscript> tag at all.

如果用户有js禁用，那么addClass标签将不会被触发，也不会隐藏任何东西。我认为你根本不需要使用

You have to make sure the script tag is right after the <body> so the user doesn't see a jump of the content and then suddenly hidden. This is better than hiding every thing by default because some search engines may notice that you have hidden text and ignore it for spamming reasons.

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

#2

I would think you could make this kind of a hack:

我认为你可以做这样一个黑客:

Start with content hidden by default.
从默认隐藏的内容开始。
Add another css class to the elements you want to show.
向要显示的元素添加另一个css类。
In a noscript tag, add another CSS file with a definition for the new css class, to show the content.
在noscript标签中，添加另一个带有新CSS类定义的CSS文件，以显示内容。
Otherwise, use jQuery to fade In the elements.
否则，使用jQuery淡出元素。

Alternatively, push back on the guy you're building this website for, because that is a horrible user experience. =D

或者，把你建这个网站的人推回去，因为那是一个可怕的用户体验。= D

#3

Have different sites for visually impaired and the rest. One has the script and the other doesnt.

有不同的网站为视障人士和其他。一个有剧本，另一个没有。

Could be as easy as a get variable if you have some sever side code.

如果您有一些服务器端代码，可以像get变量一样简单。

#4

In the head, you could create set this CSS rule in javascript:

在头部，你可以用javascript创建这个CSS规则:

*
{
    position:relative;
    left:-9999px;
}

using jquery: $("*").css({position: 'relative', left: '-9999px'})

使用jquery:$(“*”)。css({位置:“相对”,左:“-9999 px”})

Then at the bottom of the page run your javascript to hide everything and remove this CSS rule, and then gradually fade in like you want.

然后在页面底部运行javascript来隐藏所有内容并删除这个CSS规则，然后像您希望的那样逐渐淡出。

This works for non-javascript browsers, and for javascript-enabled screenreaders :)

这适用于非javascript浏览器和支持javascript的屏幕阅读器:)

#5

I think the only, not ideal solution to this problem is use jQuery's hide() function after you've loaded the elements, then fade them in. You'll get a flash of content, but it's accessible.

我认为对这个问题唯一不理想的解决方案是在加载元素后使用jQuery的hide()函数，然后将其淡入。你会得到一闪一闪的内容，但它是可访问的。

I've got a small example here.

这里有个小例子。

#1