Estoy intentando configurar un código para tener un código que está oculto al principio pero luego se desvanece después de cargar la página.

Tengo el siguiente código HTML:

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

Entonces también tengo este código CSS, que oculta el<div>.

div.hidden
{
    display: none
}

Finalmente, tengo mi jQuery:

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

Lo que esperaba que sucediera es que el primer .fadeOut () se desvanecería, removeClass evitaría que el CSS lo ocultara, y el .fadeIn () final lo volvería a desvanecer en la página. Desafortunadamente esto no funcionó.

Puedes ver el código aquí:Violín

Entonces, ¿alguien puede decirme cómo mantener una<div> oculta hasta que se carga una página, y luego se desvanece usando jQuery?

¡Gracias!