通过 jQuery 使用淡出 div 作为启动屏幕？答案

【问题标题】：Using a fade-out div as a splash screen through jQuery?通过 jQuery 使用淡出 div 作为启动屏幕？
【发布时间】：2012-04-07 04:16:47
【问题描述】：

在页面加载时显示 div 的脚本使用 jQuery 来模拟闪屏？

【问题讨论】：

How can I fade out a div using jQuery? 的可能重复项

标签： jquery html splash-screen fadeout

【解决方案1】：

这很简单！您可以使用 jQuery fadeOut()! 代码如下：

CSS

#splashscreen {
    height: 100%;
    width: 100%;
    z-index: 99;
}

上面的 CSS 将使启动画面填满整个页面并高于一切。

jQuery JS

$(window).load(function() {
    $('#splashscreen').fadeOut('slow');
});

它会做的是，当它检测到页面已经加载时，它会慢慢淡出splashscreen div。

HTML

<div id="splashscreen">
    Put your splashscreen content here. It can be anything!
</div>

这就是创建启动画面所需的全部内容。不幸的是，这不能在 JSFiddle 中模拟。

【讨论】：

你需要在div中添加position:absolute;

【解决方案2】：

您可以在加载脚本的某些部分后调用函数来计时：

$(document).ready(function() {
    var oneLoaded;
    function partOneLoaded() {
        oneLoaded = 1;
        loadReady();
    }
    var twoLoaded;  
    $('div').load('../inc/salesstatus.php, function() {
        twoLoaded = 1;
        loadReady();
    });      
    function loadReady(){
        if (oneLoaded == 1 && twoLoaded == 1)
            $('#loadcontainer').fadeOut('slow');
    }

/* ****rest of your script here  ****** */

// ie) at the end of your scripts: 

partOneLoaded();    

});

一旦加载了某些内容或运行了脚本，您就会调用您的函数，它们都会尝试调用 loadReady()。只有最后一次尝试才能成功淡出您的 div。在脚本末尾调用一次，如果 loadcontainer 在加载其他内容之前淡出，则在尚未加载的项目末尾添加另一个函数。

我不会进入加载 div 的 css 和 html，因为它超出了您的问题范围。

你的问题很模糊。以后，请提供更多详细信息，以便我们更好地了解您正在使用的内容。

【讨论】：