在页面最初加载时执行淡入？答案

【问题标题】：Execute Fade-In as Page initially loads?在页面最初加载时执行淡入？
【发布时间】：2012-05-27 09:04:03
【问题描述】：

我正在编写一些 jQuery 代码来应用页面转换。我想要 jQuery 代码做的基本上是应用页面的淡入效果，如下所示：

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

一旦页面加载页面重新加载，然后指示淡入效果，但我想要发生的是整个网页从一开始就淡入效果并尝试：

$(document).load(function() {

但是，这不起作用。我也试过这段代码无济于事：

$("body").load().css("display", "none");
$("body").load().fadeIn(400);

我的代码块中是否有任何可见的错误可以被纠正以应用所需的行为，或者社区是否可以将我引导到一个指南，该指南展示了我的目标的正确实施？

【问题讨论】：

标签： javascript jquery debugging implementation fadein

【解决方案1】：

您应该在窗口而不是 DOM 上使用负载。

试试：

   $(window).load(function(){

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

})

如需进一步解释，请尝试Here

【讨论】：

【解决方案2】：

//    $("body")().fadeIn(400); // this is incorrect, try with:
$('body').fadeIn(400);

这意味着：

$("body").css("display", "none");

$(window).load(function(){  // use "window"
  $('body').fadeIn(400);
});

或者您可以尝试直接从您的 CSS 设置 display:none;（取决于您的需要）

body{
  display:none;
}

【讨论】：

【解决方案3】：

您可以使用 CSS 将整个页面设置为不可见或隐藏：

body {
    display: none;
}

或者：

body {
    visibility: hidden;
}

您可以将其设置为 <head> 内的内联 CSS。然后在 jQuery 中，你可以让它在加载后淡入。

【讨论】：

【解决方案4】：

您可以将其放在 .css 文件中 -

body { display:none; }

或者甚至像这样将它内联 -

<body style="display:none;" >

然后在 $(document).ready() 回调中使用它淡入淡出 -

$(document).ready(function(){
   $("body").fadeIn(400);
});

浏览器将首先根据您的css 文件呈现HTML。所以当浏览器渲染<body>标签时，它会看到一个css规则说它的display属性必须设置为none。只有在所有 HMTL 都加载完毕并且 jQuery 准备就绪 ($(document).ready()) 之后，您才能调用您的 fadeIn()；

【讨论】：