.show() not working on page load - jQuery

Question

I have been trying to get the jQuery to animate the loading of my page. I have proved that jQuery is working correctly because it works with .hide();

Here is my JSFiddle

Here is my JavaScript File

$(document).ready(function(){
  $(".intro").show();
});

Answer 1

It is because you have this is your CSS:

.intro {
    visibility: hidden;
}

To fix this, change your CSS to:

.intro {
    display: none;
}

OR

Change the JS:

$(document).ready(function(){
    $(".intro").css('visibility', 'visible');
});

The jQuery .show() method sets the style of an element to display: block; but ignores the visibility style. The .hide() method essentially adds display: none; to an element.

Here is a good related question.

Answer 2

use

display: none;

instead of

visibility: hidden;

for the class .intro in your css.

Here is the working fiddle.

Answer 3

In your css, you are setting visibility: hidden;. Change it to display:none.

Because .show() is basically doing display:block.

OR

Change the code like this $(".intro").css("visibility","visible")

Fiddle