hacer aparecer div tras X segundos con jQuery

eduhernan · #1 (**permalink**) 23/11/2011, 07:51

Buenos días,

Pues resulta que hace bastante tiempo, que por razones de estudios y tiempo tuve que abandonar mi hobby de hacer webs y me estoy reincorporando ahora, e intentando ponerme al día en bastantes cosillas, que en 4 años han cambiado muchas cosas.

Bueno, al grano. Resulta que tengo una web, y en la portada, muy sencilla, tengo una pequeña animación flash que durará más o menos 2 o 3 segundos. Justo debajo del flash, tengo un div, con una imagen y un menú en texto. Pues lo que intento hacer, es que, automáticamente al cargar la página, este div que tiene como id "contenedorbajo", que aparezca poco a poco con un fadeIn lento. Estoy intentándolo hacer con jQuery, pero no logro hacer que funcione.

Al principio en el documento invoco en head al script:

Código:

<script src=”jquery.js”></script>

Y ya luego en el cuerpo de la página, invoco al fadeIn de jQuery:

Código:

<script>
$(document).ready(function(){
$("contenedorbajo").fadeIn("slow", function (){
});
</script>

La historia es que no logro hacer que funcione, la web aparece completa y no hay efecto de desvanecimiento del div.
Otra manera de hacerlo había pensado en solapar otro div flotante encima del que quiero ocultar, y hacerle a este un efecto de fadeOut, pero el problema es que de fondo hay una imagen, con lo que ver un cuadrado blanco que desaparece no quedaría bien.

Gracias de antemano por la ayuda!!
Eduardo

America|UNK · #2 (**permalink**) 23/11/2011, 08:43

#contenedorbajo

eduhernan · #3 (**permalink**) 23/11/2011, 08:50

Gracias por la pronta respuesta, pero nada.

He probado a hacer en la hoaj de estilos que todos los div estén en "display:none", pero el caso es que no sale nada. Estoy empezando a creer que quizás el evento (document).ready no sea el adecuado, pero no tengo claro cuál otro debería poner en tal caso.

sjam7 · #4 (**permalink**) 23/11/2011, 09:03

creo que puedes poner algo asi:

Código Javascript:

Ver original$(document).ready(function(){
   $("#contenedorbajo").delay(3000).fadeIn("slow");
});

lo del delay es para que tarde 3 segundos en hacerse el fadeIn, la capa #contenedorbajo debe estar con estilo display:none

espero te sirva

eduhernan · #5 (**permalink**) 23/11/2011, 09:31

Gracias por la aportación, pero nada, no hay manera, en el momento que pongo el display:none, el flash que está justo encima del div del menú baja ocupando su lugar. Estoy repasando todo lo que tengo, pero no se, estoy pensando que quizás se deba a las posiciones de los div, que efectivamente haga el fade, pero que lo haga fuera de la vista de pantalla?

sjam7 · #6 (**permalink**) 23/11/2011, 09:42

pues checalo sin el flash encima y si el div hace el fade pues ya seria cosa de que jueges con los z-index de los divs

supongo que el flash esta en un div dentro del otro o como esta la estructura? realmente entiendo muy poco de lo que quieres hacer

eduhernan · #7 (**permalink**) 23/11/2011, 10:26

Vale, voy a poner la estructura de la web simplificada y los estilos que le estoy dando, así seguro me pueden entender mejor:

Código HTML:

Ver original<head>
<title>titulo</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
<script src=”jquery.js”></script>
</head>
 
<body>
<img id="bg" src="fondoprueba2.jpg">
  <div class="contenedor">
    <div class="centrado">
      <div class="alto">
      <img src="escudo.gif" class="logo" id="escudo">
      </div>
      <div class="bajo">
            <span class="logo" id="clogo">
            <object classid="...">ESTE ES EL FLASH</object>
            </span>
            <div class="menu" id="contenedorbajo"><img src="drocha.gif" class="menu"><p class="menu">AQUÍ EL MENU CON LOS ENLACES EN TEXTO</div>
      </div>
    </div>
    </div>
        <script>
        $(document).ready(function(){
        $("#contenedorbajo").delay(3000).fadeIn("slow"){
        });
        </script>
</body>

Y ahora los estilos:

Código CSS:

Ver originalbody {
    background: #fff;
    height:100%;
    text-align:center;
}
 
 
#bg {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
}
 
.contenedor {
    width: 99%; 
    height: 98%;
    position: fixed;
    display: table;
    border:2px dashed #fff;
    margin: 0 auto;
}
    
.centrado {
    position: absolute; 
    top: 50%;
    display: table-cell; 
    vertical-align: middle;
    text-align: center; 
    position: static;
    }
    
 
.alto {
    width: 100%;
    position:absolute;
    top: 7%;
    }
        
.bajo {
    width:100%;
    position:absolute;
    bottom:10%;
    }
    
.logo {
    text-align:center;
    margin-top:40px;
    }
 
.menu {
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:8px;
    letter-spacing:2px;
    word-spacing:20px;
    text-transform:uppercase;
    margin-top:15px;
    position:relative;
    display:none
    }

Lo que yo quiero tener oculto es el div que está dentro de "bajo" y que se llama "contenedorbajo". Lo que ocurre al ponerle display:hidden es que su lugar lo ocupa el flash, y no sé quizás si se está superponiendo. De todos modos, he hecho eso, de probar sin el flash e igual, no ocurre nada.

Gracias!

MurilloJ1 · #8 (**permalink**) 23/11/2011, 16:17

Tienes un error en la linea del jquery en lugar de "{" es ";"

Intenta con esto:
HTML:

Código:

<html>
<head>
    <title>titulo</title>
    <link href="estilos.css" rel="stylesheet" type="text/css" />
    <script src="jquery.js" type="text/javascript"></script>
</head>
<body>
    <img id="bg" src="fondoprueba2.jpg">
    <div class="contenedor">
        <div class="centrado">
            <div class="alto">
                <img src="escudo.gif" class="logo" id="escudo">
            </div>
            <div class="bajo">
                <span class="logo" id="clogo">
                    <object classid="...">
                        ESTE ES EL FLASH</object>
                </span>
                <div id="contenedorbajo">
                    <img src="drocha.gif" class="menu"><p class="menu">
                    AQUÍ EL MENU CON LOS ENLACES EN TEXTO</div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#contenedorbajo").delay(3000).fadeIn('slow');
        });
    </script>
</body>
</html>

Y este es el CSS:

Código:

body
{
    background: #fff;
    height: 100%;
    text-align: center;
}
#bg
{
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
}
.contenedor
{
    width: 99%;
    height: 98%;
    position: fixed;
    display: table;
    border: 2px dashed #fff;
    margin: 0 auto;
}
.centrado
{
    position: absolute;
    top: 50%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: static;
}
.alto
{
    width: 100%;
    position: absolute;
    top: 7%;
}
.bajo
{
    width: 100%;
    position: absolute;
    bottom: 10%;
}
.logo
{
    text-align: center;
    margin-top: 40px;
}
#contenedorbajo
{
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    letter-spacing: 2px;
    word-spacing: 20px;
    text-transform: uppercase;
    margin-top: 15px;
    position: relative;
    display: none;
}

Cambie el estilo menu por el nombre del div.

Espero que te sirva
Saludos!

eduhernan · #9 (**permalink**) 23/11/2011, 19:09

¡¡Ha funcionado, perfecto!! Muchas gracias!! Entonces, es mejor referencias sólo los div por el id y no por la class, según he entendido. De nuevo muchas gracias!