Question

您好我想在网站上使用淡入效果，以便在页面加载完成后，内容会淡入淡出。

原因是因为一些绝对定位的元素加载第一件事情在较慢的连接上看起来有些混乱，直到所有内容都被踢进去。

所以我在这里找到了一些能够很好地完成工作的代码，这里是：

HTML

<body id="main-content">

CSS

#main-content { 
    display: none;
}

SCRIPT

$(document).ready(function() {
    $('#main-content').fadeIn();
});

这正是我想要的，但我的困境是这样的;有没有jQuery不会触发的情况，而且身体css仍然设置为不显示？

我是一个完整的jQuery newb，所以不知道这是否会发生，我知道它是一个远程库，所以我认为它不需要安装在像Java这样的浏览器中，但这就是我所知道的。 / p>

提前感谢您的帮助。

Answer 1

您正面临着FOUC（无格式内容的闪烁）。您可以使用<noscript>来保护您的网页免受js禁用的客户端的侵害：

<noscript>
<style type="text/css">
#main-content {display: block}
</style>
</noscript>

请参阅this讨论。

Answer 2

禁用javascript的用户不会看到您的信息页，但这些信息只占所有访问者的一小部分。

我会创建另一个带有警告“启用javascript以查看此网站”的div并使用jQuery删除此div。

$(document).ready(function() {
    $('#warning').remove();
    $('#main-content').fadeIn();
});

Answer 3

是的，如果禁用JavaScript，则用户将无法看到您的信息页。

你可以这样做：

<body>
    <div id='mainContent> ... </div>
    <noscript> (alternate page for people with JS disabled) </noscript>
</body>

Answer 4

您可以使用css3动画，不支持的浏览器只显示没有淡入的页面。

@-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

#main-content {
  /*run the animation only once*/
  -webkit-animation: fadeIn ease-in 1; 
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;

  /*Stay at end of animation*/
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;

  /*Length of animation*/
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
}

示例 - http://jsfiddle.net/gpfVJ/

这个页面有没有加载的机会？

4 个答案: