Покажите div после x секунд и покажите еще один div после y секунд

Question

Я новичок в этом, но я пытаюсь открыть div1 через 1 секунду и показать div2 через 5 секунд. На данный момент только div2 отображается через 1 секунду. Пожалуйста, помогите мне исправить javascript.

Я также хотел бы знать, как скрыть div1 после отображения div2.

Мой код:

<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> 

Answer 1

Вы не можете иметь 2 функции с тем же именем. Изменить вторую часть

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

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

Answer 2

Две проблемы.

1. Каждая функция должна иметь четкое название.
2. Вы вызываете функцию в SetTimeout как setTimeout(showIt, 5000); // after 5 secs

jsFiddle example