页面加载特定时间后隐藏文本然后显示[关闭]答案

【问题标题】：Hide text as soon as page loads for a specific time then reveal [closed]页面加载特定时间后隐藏文本然后显示[关闭]
【发布时间】：2015-12-04 11:25:19
【问题描述】：

我想在页面加载时隐藏一段，直到一段时间过去。最简单的方法是什么？我知道这可能会涉及某种形式的 js，但这是我所能理解的。

【问题讨论】：

请访问stackoverflow.com/help/how-to-ask

标签： javascript jquery html css

【解决方案1】：

您不需要任何类型的<form>。只需使用以下 sn-p：

$(function () {
  $("p").hide().prop("hidden", false);
  setTimeout(function () {
    $("p").fadeIn(400);
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p hidden>Welcome!</p>

我使用的概念是，加载它隐藏，以编程方式隐藏它并在一段时间后显示。

【讨论】：

hidden 有什么用？
@RayonDabre hidden。谷歌兄弟！！！ :)
@PraveenKumar 对不起，我应该更仔细地阅读您的回答... :)
@PraveenKumar 我喜欢使用 CSS 进行样式设置，而不是属性 :) 在某些情况下可能很难调试它。也就是说，你得到我的投票......
@PraveenKumar 就是说，这个属性h就是它的意思，我很高兴学到了一个新东西，谢谢Praveen！

【解决方案2】：

只能在 CSS 中完成：

.toReveal {
  opacity: 0;
  animation: reveal 400ms 5s forwards;
}

@keyframes reveal {
  100% {opacity: 1;}
}

<p class="toReveal">
  To reveal
</p>

【讨论】：

【解决方案3】：

我制作了一个 js bin，使用 setTimeout 函数对用户隐藏文本 5 秒。

http://jsbin.com/savoduruha/edit?html,js,output

【讨论】：

【解决方案4】：

这是简单的 javascript 代码

 function onTimerElapsed() {
   var myDiv = document.getElementById('theDiv');
   myDiv.style.display = myDiv.style.display === 'none' ? 'block' : 'none';
 }

<body onload="setTimeout(onTimerElapsed, 2000);">
  <div id="theDiv" style="display:none;">
    Text to hide on reload
  </div>
</body>

【讨论】：

【解决方案5】：

一个简单的 CSS 解决方案是使用关键帧。（不需要脚本库！）

p {opacity: 0;}
p {
 -webkit-animation: show-me-in-5-seconds 2s 1s forwards; 
  -moz-animation:    show-me-in-5-seconds 2s 1s forwards;
  -o-animation:      show-me-in-5-seconds 2s 1s forwards;
  animation:         show-me-in-5-seconds 2s 1s forwards;
}

@-webkit-keyframes show-me-in-5-seconds {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes show-me-in-5-seconds {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes show-me-in-5-seconds {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes show-me-in-5-seconds {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

&lt;p&gt;SHOW ME IN 5 SECONDS&lt;/p&gt;

【讨论】：