在最初隐藏可见性时，使用JQuery淡入并显示页面减速

Question

好吧，假设我的样式表中有一个body元素，并设置visibility:hidden;当页面加载时，我想使用.fadeIn并慢慢淡入页面。

我尝试过类似的东西，但它不起作用。

$("body").css("visibility", 'visible').fadeIn("slow");

Answer 1

而不是可见性，将opacify设置为0，然后使用animate来获得最佳效果。

$("body").css("opacity", 0).animate({ opacity: 1}, 1000);

<强> Demo

你可以通过css本身将初始不透明度设置为0，这样可以产生更好的效果。随之而来的是代码简化为。

$("body").animate({ opacity: 1}, 1000);

Answer 2

将其更改为：

$("body").css("display", 'none').fadeIn("slow");

fadeIn适用于display: none的元素。此外，将可见性设置为可见将显示，而不是隐藏。

http://jsfiddle.net/AvG5G/

Answer 3

在CSS中，为正文设置display: none。

你的JS将是$("body").fadeIn("slow");

有效！

Answer 4

最初使用body，css

隐藏display:none;

$("body").hide(0).delay(2000).fadeIn("slow");

DEMO

.delay仅用于演示目的

Answer 5

$("body").hide().fadeIn("slow");

这是最简单的方法。

http://jsfiddle.net/AvG5G/1/