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

时间:2012-01-28 04:55:51

标签: jquery css

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

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

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

5 个答案:

答案 0 :(得分:7)

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

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

<强> Demo

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

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

答案 1 :(得分:2)

将其更改为:

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

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

http://jsfiddle.net/AvG5G/

答案 2 :(得分:1)

在CSS中,为正文设置display: none

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

有效!

答案 3 :(得分:0)

最初使用bodycss

隐藏display:none;
$("body").hide(0).delay(2000).fadeIn("slow");

DEMO

.delay仅用于演示目的

答案 4 :(得分:0)

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

这是最简单的方法。

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