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

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

我希望能够使用 Javascript、使用 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;
}

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

<noscript><style>#header { opacity: 1; }</style></noscript>

Update：因为这不是一个选项，下一个选项是执行脚本紧接着 the #header元素。

<div id="header"></div>
<script>$("#header").css("opacity", 0).animate({opacity:1}, 500);</script>