jQuery 'fade in' on page load without using 'display:none' in the css

Question

Should hopefully be a simple one...

So I'm after a basic fade in on page load on my site, similar to what this site has... http://jack-hughes.com/

The problem I've got is that the standard jQuery fadeIn function seems to require 'display:none' on the element to be animated, which obviously means it stays hidden if someone has javascript disabled.

$('.h1').fadeIn('slow', function() {
    // Animation complete
});

I could do with someone pointing me in the right direction as to get this effect without display:none on any of my elements.

I had a go myself to no avail. Simply attempted to check if the element existed, and if it did, set the css opacity to 0, then run the animation. I'm sure you can have a laugh at my expense (I'm not a JS guy). Thanks!

if($('.h1').length > 0) {
    $(this).css("opacity","0");
    $('.h1').animate({
        opacity:1,
    }, 1500, function() {
        //Animation Complete
    });
};

Answer 1

I think your best bet would be to use display:none in your CSS and then include a simple style tag wrapped like so

<noscript>
    <style>
        #container { display:block !important; }
    </style>
</noscript>

Answer 2

How about hiding it first

$('.h1').hide().fadeIn('slow', function() {
    // Animation complete
});

Answer 3

$('.h1').hide(<h1>hello</h1>).fadeIn('slow', function() {
    // Animation complete
});

write like this as per Musa