JQuery.ready 来不及了 : How do I apply CSS Values with JQuery before Rendering?

Question

我希望能够对某些元素应用不透明度，使它们仅在启用 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;
}

Answer 1

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

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

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

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