jQuery on document ready my selection opacity:0, IE delay?

on doc ready i've got my selection that set elements opacity:0 and than animate them to 1. It's nice on S开发者_如何学Pythonafari and FF but in IE on window ready i see elements appears a moment before javascript was applied to them. Any suggestion? I've to set visibility none for all of them via css ?

thank you d

var i = 0;
$mySelection.each(function() {
$(this).css("opacity","0"); // qui hide
$(this).delay((i * 100) + ($mySelection.length)).animate({ opacity: "1"}, {queue:true, duration:1000, easing:"quartEaseIn"}); 
        i++;
    })

You should set your elements to "display:none" in your css. Then your elements are not visible from the beginning.

But if you set them to opacity:0 in you ready-script you can't control "when" your browser executes these commands. If you browser runs you ready-script just 10ms after your page is loaded you would see these elements.

This is a classic problem :

You want some HTML element to be invisible if Javascript is enabled, but you want the HTML element to be visible if there's no JS. (than you do an animation, but that's not the problem)

Another good thing would be to put as much styles as possible in CSS files rather then in JS scripts.

So a good solution would be to be able to say, in CSS : "if javascript enabled, apply this style".

To do this, I usually use a very small piece of code in the HTML head part :

<script type="text/javascript">
    //<![CDATA[
        document.documentElement.className='js'
    //]]>
</script>

This will add a "js" className to the tag if javascript is enabled.

You can use this "js" className in your CSS files to define some styles just in case Javascript is enabled. This CSS will be active during HTML load time, and so you don't have to wait for DOM ready to start applying styles with JS. This way, you have a much better loading experience.

CSS exemple :

#MyappearingElement { display: block; }
.js #MyappearingElement { display: none; }

With this piece of CSS, the element will be visible on page load only if Javascript is disabled. If Javascript is enabled, the element is not displayed, so I can make a nice animation to show it.