Question

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

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

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

$(document).load(function() {

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

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

我的代码块中是否有任何可见的错误可以纠正以应用所需的行为，或者社区是否可以指导我一个能够正确实现我的目标的指南？

Answer 1

您可以将其放在.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();

Answer 2

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

body {
    display: none;
}

或者：

body {
    visibility: hidden;
}

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

Answer 3

//    $("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;
}

Answer 4

您应该使用窗口上的加载而不是DOM。

尝试：

   $(window).load(function(){

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

})

要进一步探索，请尝试Here