JQuery.ready为时已晚：如何在渲染之前使用JQuery应用CSS值？

我希望能够将不透明度应用于某些元素，以便仅在启用javascript时才使它们不可见。 我不想使用display:none因为我希望布局就好像它们在DOM中一样，所以将opacity设置为0是完美的。

我希望能够使用JQuery使用JQuery设置此初始值，因此我不必混淆浏览器在不透明度（以及许多其他）属性上的差异。 但如果我像这样将不透明度设置为0：

 $(document).ready(function() { $("#header").css("opacity", 0); $("#header").animate({opacity:1}, 500); }); 

…它已经在屏幕上可见的一半时间显示并消失。

如何在使用JQuery渲染之前设置这些css值？

寻找一个仅限JQuery的解决方案，所以我不必手动处理每个浏览器实现，如下所示：

 #header { -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; } 

Answer 1

只需在CSS文件中将不透明度设置为0即可。 要覆盖无脚本，请将以下内容添加到您的头部：

更新 ：由于这不是一个选项，下一个选项是在#header元素之后直接执行脚本。

Answer 2

为什么不用

 #header { visibility: hidden; } 

然后在头部的一个noscript

Answer 3

问题是，渲染开始后几乎总会发生JavaScript执行，除非您执行表格黑客攻击，直到页面完全下载为止。 但是你会惹恼你的用户，你应该被枪杀。

你要的是一些在不烦扰用户的情况下无法可靠地完成的事情。 因此，更好的选择是惹恼开发人员，并做一些额外的工作。