首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >页面加载10秒后显示div

页面加载10秒后显示div
EN

Stack Overflow用户
提问于 2020-04-09 18:22:09
回答 2查看 36关注 0票数 2

我有这个脚本,我已经能够使它在20秒内fadeOut,但我希望它需要10秒后显示页面加载,我应该修改什么?

代码语言:javascript
复制
jQuery("#messageBox").hide().slideDown();
 setTimeout(function(){
  jQuery("#messageBox").fadeOut();        
 }, 20000);

提前感谢

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-04-09 18:24:26

要让内容在10秒后淡入,您需要使用CSS隐藏页面加载时的所有内容,以避免FOUC problem,然后调用fadeIn()。如下所示:

代码语言:javascript
复制
setTimeout(function() {
  $('#container').fadeIn();        
}, 10000);
代码语言:javascript
复制
#container { display: none; }
代码语言:javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <h1>Lorem ipsum</h1>
</div>

票数 3
EN

Stack Overflow用户

发布于 2020-04-09 18:32:14

你的方向是对的。就像你正在应用fadeOut一样。

您需要在setTimeout的帮助下,在10秒后显示您的div。但是你必须在页面加载时默认隐藏这个div

请看下面的例子:

代码语言:javascript
复制
jQuery("#messageBox").hide();
setTimeout(function(){
  jQuery("#messageBox").slideDown();       
 }, 10000);
 setTimeout(function(){
  jQuery("#messageBox").fadeOut();        
 }, 20000);
代码语言:javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messageBox">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61118980

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档