jQuery function in pure javascript

Question

I'm one of those people who never was bother to learn JavaScript and went straight for jQuery.

I'm writing simple script to hide everything till page is fully loaded - and because my jQuery is loaded after html/css/images I planning to put small script in the header.

So in jQuery it would be

$('body').css('display','none');

Pure JavaScript:

document.body.parentNode.style.display = 'none';

But than:

$(window).load(function() { $('body').css('display', 'block').fadeIn(3000); });

Has not animation? Why?

What I'm trying to do:

• #1 hide everything(body) with javascipt till everything is loaded (there is no jQuery at this state as is being loaded at the end)
• #2 show everthing(body) with animation of fadding (with jQuery - as is loaded at this state)

Any help much appreciated.

Pete

Answer 1

The equivalent to

$('body').css('display','none');

is

document.body.style.display = 'none';

$('body') selects the body element, but document.body.parentNode obviously selects the parent of body .

And shouldn't it be just

 $('body').fadeIn(3000); 

?

I asked because I assumed you already got the code working with only jQuery. But apparently you haven't, so again, it has to be $('body').fadeIn(3000); only, otherwise you make the element visible immediately and there is nothing to animate anymore.

See a demo: http://jsfiddle.net/fkling/Q24pC/1/

Update:

$(window).load is only triggered when the all resources are loaded. This could take longer if you have images. To hide the elements earlier, you should listen to the ready event:

$(document).ready(function() {
    // still don't know why you don't want to use jQuery.
    document.body.style.display = 'none';
});

or hide the elements initially with CSS

body {
    display: none;
}

To make sure that users with disabled JavaScript can see the page, you'd have to add

<noscript>
    <style>
        body {
            display: block;
        }
    </style>
</noscript>

in the head after you other CSS styles.

Update 2

Seems that setting the CSS property directly causes problems in some browsers. But using $('body').hide() seems to work: http://jsfiddle.net/fkling/JaLZU/

Answer 2

I'm not that clear on what your question really is, but if I'm on the right track you don't need the .css('display', 'block') part for the animation. Get rid of that, so it's just $('body').fadeIn(3000); and the animation should work fine.