.show() не работает при загрузке страницы - jQuery

Question

Я пытаюсь получить jQuery для анимации загрузки моей страницы. Я доказал, что jQuery работает правильно, потому что он работает с .hide();

Вот мой JSFiddle

Вот подам JavaScript

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

Answer 1

использование

display: none;

вместо

visibility: hidden;

для класса .intro в вашем CSS.

Адрес working fiddle.

Answer 2

Это происходит потому, что у вас есть это ваш CSS:

.intro { 
    visibility: hidden; 
} 

Чтобы это исправить, изменить CSS на:

.intro { 
    display: none; 
} 

ИЛИ

Изменения в JS:

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

.show() метод JQuery устанавливает стиль элемента к display: block;, но игнорирует visibility стиля. Метод .hide() по существу добавляет display: none; к элементу.

Here is a good related question.

Answer 3

В вашем css вы устанавливаете visibility: hidden;. Измените его на display:none.

Потому что .show() в основном делает display:block.

ИЛИ

Измените код, как этот $(".intro").css("visibility","visible")

Fiddle