Question

我想在浏览器中加载索引页面时，当前div将在3秒后淡出。当div隐藏页面的主要内容（菜单，图像等）时显示。我也在我的页面中使用bootstrap css

我在以下问题中得到了堆栈。问题是我的JS功能不起作用。

到目前为止，这是我的html页面的正文：

<body> <div id="fade">
        <div id="box">
          <blockquote class="blockquote-reverse">
                <p>Blah Blah</p>
                <footer>Project Manager of <cite title="Source Title">Some project</cite></footer>
        </blockquote>
       </div>
     </div>

<!-- blah blah here comes the rest of the site --> </body>

这是我的css文件：

#box {
    font-family: 'Playfair Display';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

#fade {
    height:100vh;
    background-color: black;
}

这是JS文件：

$(document).ready(function(){
    $('#box').delay(300).fadeOut(300);
});

请注意，我使用的是BootStrap（如前所述）。

Answer 1

使用.load()代替.ready()，因为load等待您的网页加载了所有内容，但ready，当脚本准备就绪时。

$(window).load(function(){
    // your code
});

而且你不需要delay。

这是一个活生生的演示：http://jsfiddle.net/sox59a1a/

Answer 2

如果我没有误解，你可以做什么来做你所说的：

$(window).load(function(){
    $("#fade").fadeOut(1000, function(){
        $("#restOfPage").fadeIn(1000); 
    });
});

这是一个非常基本的例子，但你可以用这个开始做你想做的事。

小提琴：

https://jsfiddle.net/sox59a1a/3/

HTML页面加载+ Bootstrap时如何淡化消息

2 个答案: