jQuery .fadeIn() on page load?

Question

I'm trying to set up some code so that I have a that is hidden at first but then fades in after the page is loaded.

I have the following HTML code:

<div class="hidden">
<p>This is some text.</p>
</div>

Then I also have this CSS code, which hides the <div>.

div.hidden
{
    display: none
}

Finally, I have my jQuery:

$(document).ready(function() {
    $('div').fadeOut(1);
    $('div').removeClass('hidden');
    $('div').fadeIn(1000);
});

What I was hoping would happen was that the first .fadeOut() would fade out the , the removeClass would stop the CSS from hiding it, and the final .fadeIn() would fade it back onto the page. Unfortunately, this did not work.

You can view the code here:Fiddle

So can someone please tell me how to keep a <div> hidden until a page loads, and then fade it in using jQuery?

Thanks!

Answer 1

The problem is fadeIn works on hidden elements, when you remove the hidden class before the fadeIn() is called the element is fully displayed so there is nothing to to fadeIn()

It should be

$(document).ready(function () {
    $('div.hidden').fadeIn(1000).removeClass('hidden');
});

Demo: Fiddle