jQuery 'fade in' on page load without using 'display:none' in the css
<p>Should hopefully be a simple one...</p>

<p>So I'm after a basic fade in on page load on my site, similar to what this site has... <a href="http://jack-hughes.com/" rel="nofollow">http://jack-hughes.com/</a></p>

<p>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.</p>

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

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

<p>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!</p>

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