.show（）不在页面加载 - jQuery

Question

我一直试图让jQuery为我的页面加载动画。我已经证明jQuery正常工作，因为它适用于.hide（）;

这是我的JSFiddle

这是我的JavaScript文件

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

Answer 1

这是因为你有这是你的CSS：

.intro {
    visibility: hidden;
}

要解决此问题，请将CSS更改为：

.intro {
    display: none;
}

或

更改JS：

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

jQuery .show()方法将元素的样式设置为display: block;，但忽略visibility样式。 .hide()方法实质上将display: none;添加到元素。

Here is a good related question

Answer 2

使用

display: none;

而不是

visibility: hidden;

适用于您的CSS中的课程.intro。

这是working fiddle。

Answer 3

在你的CSS中，你正在设置visibility: hidden;。将其更改为display:none。

因为.show()基本上是display:block。

OR

更改此代码$(".intro").css("visibility","visible")

Fiddle