如何在HTML页面加载时淡出消息+引导

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

我在以下问题中得到堆栈。问题是我的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（如前所述）。

来源

2015-05-15 Bill

如果你可以创建一个重现问题的小提琴，那将会有所帮助。你是否在控制台中发现错误？ – Ted

尝试使用$（window）.load（function（）{..fadeOut here ...}）; –

delay（'milliseconds'） - 意思是你有300毫秒的等待时间，你需要3000秒3秒 – ElliotM

使用代替.ready()，因为load等待，直到你的页面加载它的所有内容，但ready，当脚本已准备就绪。

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

而且你不需要delay。

这里有一个客厅演示：http://jsfiddle.net/sox59a1a/

来源

2015-05-15 13:18:49

不，它不起作用 – Bill

您是否检查演示？ –

是的。这不是我的问题。我希望'fade' div隐藏页面的所有其他containts，不要在其下面显示。然后当它淡出他们的狂欢 – Bill

如果我没有理解错误，你可以做你说什么是什么：

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

这是一个非常简单的例子，但你可以开始做你想要什么有这个..

小提琴：

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

来源

2015-05-15 13:34:47

谢谢你的尝试。页面的其余部分淡入操作不再是必需的。我编辑了CSS，现在我只需要淡出的操作，而这又不起作用。 – Bill

我知道它听起来很粗鲁，但是，你是否导入了jQuery库？ –

是的，我现在检查了它。我用Bootstrap正确添加了它，并且一切正常。但不是我的淡出功能：'' – Bill

如何在HTML页面加载时淡出消息+引导

回答

相关问题