Question

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

Answer 1

你不需要任何<form>这个。只需使用以下代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

我创建了一个js bin，其中使用setTimeout函数向用户隐藏文本5秒钟。

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

Answer 3

这是简单的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>

Answer 4

它只能在CSS中完成：

.toReveal {
  opacity: 0;
  animation: reveal 400ms 5s forwards;
}

@keyframes reveal {
  100% {opacity: 1;}
}

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

Answer 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; }
}

<p>SHOW ME IN 5 SECONDS</p>

页面加载一段特定时间后立即隐藏文本然后显示

5 个答案: