JQuery.ready太晚了：如何在渲染之前使用JQuery应用CSS值？ [英] JQuery.ready is too late: How do I apply CSS Values with JQuery before Rendering?

问题描述

我希望能够对某些元素应用不透明度，以使其只有在启用了JavaScript的情况下才会隐藏。 我不想使用 display：none ，因为我想让布局好像他们在DOM中，所以将不透明度设置为0是完美的。

我想能够使用Javascript来设置这个初始值，使用JQuery，所以我不必在浏览器的不透明度（和许多其他）属性。但是如果我把opacity设置为0，像这样：

  $（document）.ready（function（）{
 $ （#header）。css（opacity，0）; 
 $（＃header）。animate（{opacity：1}，500）; 
} 
  

...一半时间已经在屏幕上显示， p>

如何在使用JQuery之前设置这些css值，然后才能渲染？

寻找仅限JQuery的解决方案我不必手动处理每个浏览器实现像这样：

  #header {
 -moz-opacity： .50; 
 filter：alpha（opacity = 50）; 
 opacity：.50; 
} 
  

解决方案

CSS文件本身。要覆盖无脚本，请在头部添加以下内容：

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

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

 < div id =header>< / div> 
< script> $（＃header）css（opacity，0）.animate（{opacity：1}，500）;< / script& 
  

I want to be able to apply opacity to some elements to make them invisible only if javascript is enabled. I don't want to use display:none because I want the layout to act as if they're in the DOM, so setting opacity to 0 is perfect.

I want to be able to set this initial value using Javascript, using JQuery, so I don't have to mess with browser differences on the opacity (and many other) attributes. But if I set opacity to 0 like so:

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

...half the time it's already visible on the screen, so it appears and disappears.

How do I set these css values using JQuery before they ever can render?

Looking for a JQuery only solution so I don't have to manually handle every browser implementation like this:

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

解决方案

Just set opacity to 0 in CSS file itself. To cover the scriptless, add the following to your head:

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

Update: since that's not an option, the next option would be to execute the script directly after the #header element.

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

这篇关于JQuery.ready太晚了：如何在渲染之前使用JQuery应用CSS值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！