Soy muy nuevo en esto, pero estoy tratando de revelar div1 después de 1 segundo, y revelan div2 después de 5 segundos. Por el momento, sólo div2 es mostrar después de 1 segundo. Por favor me ayude a solucionar el javascript.

También me gustaría saber cómo ocultar div1 después de div2 se muestra.

Mi código:

<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>
InformationsquelleAutor N00B | 2013-09-15

2 Comentarios

  1. 5

    Usted no puede tener 2 función con el mismo nombre. Cambio de la segunda parte para

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

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

    • Perfecto! ¿Cómo puedo ocultar div1 cuando div2 es revelado?
    • Sólo tiene que añadir a function showIt2() código document.getElementById("div1").style.visibility = "hidden";
    • Aquí está la actualización de la demo: jsfiddle.net/W9YU5/1
    • Muy bueno! Es posible que div2 para reemplazar div1 en la misma posición, en lugar de bajo el oculto div1?
    • Sí es posible. Para los estilos de ambos DIVs en lugar de visibility: hidden uso display: none y en lugar de visibility: visible uso display: block (hacer ajustes al código JavaScript así)
    • Aquí es una demostración de que: jsfiddle.net/W9YU5/2

  2. 0

    Dos problemas.

    1. Cada función debe tener un nombre distinto.
    2. Puede llamar a una función en setTimeout como setTimeout(showIt, 5000); //after 5 secs

    jsFiddle ejemplo

    • Esto funciona muy bien pero hay una forma de hacer que se desvanezcan sin problemas en lugar de entrecortado?
    • Usted podría utilizar animaciones CSS o jQuery

Dejar respuesta

Please enter your comment!
Please enter your name here