JQuery.ready is too late: How do I apply CSS Values with JQuery before Rendering? -
i want able apply opacity elements make them invisible only if javascript enabled. don't want use display:none
because want layout act if they're in dom, setting opacity 0 perfect.
i want able set initial value using javascript, using jquery, don't have mess browser differences on opacity (and many other) attributes. if set opacity 0 so:
$(document).ready(function() { $("#header").css("opacity", 0); $("#header").animate({opacity:1}, 500); });
...half time it's visible on screen, appears , disappears.
how set these css values using jquery before ever can render?
looking jquery solution don't have manually handle every browser implementation this:
#header { -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; }
just set opacity 0 in css file itself. cover scriptless, add following head:
<noscript><style>#header { opacity: 1; }</style></noscript>
update: since that's not option, next option execute script directly after #header
element.
<div id="header"></div> <script>$("#header").css("opacity", 0).animate({opacity:1}, 500);</script>
Comments
Post a Comment