JQuery.ready is too late: How do I apply CSS Values with JQuery before Rendering?

Posted by viatropos on Stack Overflow See other posts from Stack Overflow or by viatropos
Published on 2010-04-27T23:00:39Z Indexed on 2010/04/27 23:03 UTC
Read the original article Hit count: 170

Filed under:
|
|
|
|

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?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about render