4

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

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

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

$(document).load(function() {

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

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

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

4

4 回答 4

2

你可以把它放在一个.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();

于 2012-05-20T17:15:44.903 回答
1

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

body {
    display: none;
}

或者：

body {
    visibility: hidden;
}

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

于 2012-05-20T17:16:13.203 回答
0 
//    $("body")().fadeIn(400); // this is incorrect, try with:
$('body').fadeIn(400);

这意味着：

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

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

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

body{
  display:none;
}
于 2012-05-20T17:16:42.970 回答
0

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

尝试 ：

   $(window).load(function(){

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

})

为了进一步解释，请尝试这里

于 2012-05-20T17:17:08.083 回答