在x秒后显示一个div，y秒后显示另一个div。

Question

我很新手，但是我想试着在1秒后显示div1，在5秒后显示div2。目前只有div2在1秒后显示了。请帮我修复javascript代码。

我还想知道如何在div2显示后隐藏div1。

我的代码：

<div id="div1" style="visibility: hidden">Reveal Div 1 after 1 second</div>
<div id="div2" style="visibility: hidden">Reveal Div 2 after 5 seconds</div>

<script type="text/javascript">
function showIt() {
  document.getElementById("div1").style.visibility = "visible";
}
setTimeout("showIt()", 1000); // after 1 sec

function showIt() {
  document.getElementById("div2").style.visibility = "visible";
}
setTimeout("showIt()", 5000); // after 5 secs
</script>

- N00B

Answer 1

您不能有两个同名的函数。将第二部分更改为：

function showIt2() {
  document.getElementById("div2").style.visibility = "visible";
}
setTimeout("showIt2()", 5000); // after 5 secs

Demo: http://jsfiddle.net/W9YU5/

- Yuriy Galanter

---

完美！当 div2 被显示时，我如何隐藏 div1？ - N00B

只需要在function showIt2()的代码中添加document.getElementById("div1").style.visibility = "hidden";。 - Yuriy Galanter

非常好！div2是否可以替换div1在相同的位置，而不是在隐藏的div1下面？ - N00B

是的，这是可能的。对于两个DIV的样式，使用display: none代替visibility: hidden，并使用display: block代替visibility: visible（同样调整JavaScript代码）。 - Yuriy Galanter

Answer 2

两个问题。

1. 每个函数必须具有唯一名称。
2. 在 setTimeout 中调用函数，例如 setTimeout(showIt, 5000); // 5 秒后

jsFiddle 示例

- j08691

---

这个很好用，但有没有办法让它平滑地淡入，而不是断断续续的？ - Lars Martinson

@LarsMartinson 你可以使用CSS动画或jQuery。 - j08691