在HTML页面中借助javascript或jquery消除黑屏

我想，当加载我的页面时，应该有一个带有白色字母的黑屏。3秒钟后，它必须溶解，主页将可见

---

如何使用JavaScript或jQuery实现这一点？

让我们假设您的黑屏是id为“black screen”的div

 <div id="black-screen">
      <!-- Black screen and white letters goes here -->
 </div>

在你的文件的某个地方

<script>
    function hideBlackScreen(){
        $("#black-screen").hide('slow');
    }
    $(function(){
        setTimeout(hideBlackScreen, 3000);
    });
</script>

函数hideBlackScreen（）{
$（“#黑屏”）.hide（'slow'）；
}
$（函数（）{
设置超时（hideBlackScreen，3000）；
});

如果您愿意，我可以发布一些JSFIDLE示例

---

下面是jQuery Docs on hide（）函数的全屏div：

我的文字

首先，您需要适合任务的HTML结构。为此，内容容器和覆盖容器作为兄弟容器可以很好地工作

示例HTML

<div id="overlay">
    <p>Please wait while something wonderful happens</p>
</div>
<div id="content">
    <div id="lipsum">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

JavaScript

要使用普通的旧JavaScript，您需要随时间调整元素的

不透明度
样式（
window.setInterval
是您的朋友）

$(document).ready(function () {
    var showContent = function showContent() {
        //callback that fires once animation is complete.
        $('#content').show();
    }, hideOverlay = function hideOverlay() {
        $('#overlay').fadeOut('slow', showContent);
    };
    //after 3000 milliseconds (=3 seconds), call the hideOverlay function
    window.setTimeout(hideOverlay, 3000);
});

window.onload = function () {
    var JSShowContent = function JSShowContent() {
        var content = document.getElementById('content');
        content.style.display = 'block';
    }, JSHideOverlay = function JSHideOverlay () {
        var overlay = document.getElementById('overlay'),
            opacity = 1,
            interval = 0,
            rate = 5; //rate is in milliseconds
        overlay.style.opacity = opacity; //set initial opacity as it defaults to ""
        interval = window.setInterval(function () {
            opacity -= 0.01; //decrement opacity
            overlay.style.opacity = opacity;
            if (opacity <= 0) {
                window.clearInterval(interval);
                overlay.style.display = 'none';
                JSShowContent();
            }
        } , rate);
    };
    //after 3000 milliseconds (=3 seconds), call the hideOverlay function
    window.setTimeout(JSHideOverlay, 3000);
};

window.onload=函数（）{
var JSShowContent=函数JSShowContent（）{
var content=document.getElementById（'content'）；
content.style.display='block'；
}，JSHideOverlay=函数JSHideOverlay（）{
var overlay=document.getElementById（'overlay'），
不透明度=1，
间隔=0，
速率=5；//速率以毫秒为单位
overlay.style.opacity=opacity；//将初始不透明度设置为默认值“”
interval=window.setInterval（函数（）{
不透明度-=0.01；//减少不透明度
overlay.style.opacity=不透明度；
if（创建一个div并使用setTimeout隐藏它。但是您需要告诉我们您是否尝试过任何东西？并发布您的HTML和JQ代码。如果您发现我的答案很有帮助，我将感谢您接受它：）
window.onload = function () {
    var JSShowContent = function JSShowContent() {
        var content = document.getElementById('content');
        content.style.display = 'block';
    }, JSHideOverlay = function JSHideOverlay () {
        var overlay = document.getElementById('overlay'),
            opacity = 1,
            interval = 0,
            rate = 5; //rate is in milliseconds
        overlay.style.opacity = opacity; //set initial opacity as it defaults to ""
        interval = window.setInterval(function () {
            opacity -= 0.01; //decrement opacity
            overlay.style.opacity = opacity;
            if (opacity <= 0) {
                window.clearInterval(interval);
                overlay.style.display = 'none';
                JSShowContent();
            }
        } , rate);
    };
    //after 3000 milliseconds (=3 seconds), call the hideOverlay function
    window.setTimeout(JSHideOverlay, 3000);
};