Entrar

Efecto de retardo al mostrar div y aparecer poco a poco

victor5atodogas · · Solicitar retirada
Me gustaria colocar a una pagina un efecto de retardo de unos 2 segundos a un div a modo de "contenedor" para que se pueda ver la imagen de fondo, y para no "molestar" al visitante, me gustaria que el div "contenedor" se fuera mostrando poco a poco.

Para que veais un ejemplo de lo que busco, solo debeis de ir aqui y entrar en la pagina del autor de la foto (no pongo la URL de la misma para que no se piense que intento copiar).


http://www.elmundo.es/elmundo/2010/10/21/ciencia/1287653278.html

Saludos y muchas gracias.
SurKaiser · · Solicitar retirada
Esto es facil pero un poco largo de codigo con javascript, pero para eso se inventaron los frameworks y el mas famoso para javascript hoy en dia es jQuery , asi que lo usaremos para lograr el efecto que quieres.

Bastara con poner entre las cabeceras esto :

<head>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
<!-- Añade este pequeño estilo a tu div (si ya tienes div predefinido agregale lo de dentro de los corchetes -->
div { margin:3px; width:80px; display:none;
height:80px; float:left; }
div#tudiv { background:#f00; }
</head>

Y al final del body esto :

<body>

<script>
$("#tudiv").fadeIn(5000);
</script>
No olvides añadirle ese trozo de estilos al div y al comenzar el estilo de tu div añadele el estilo que te di es decir :
div { lo que te di }
div#tudiv {tus estilos}
agregale div antes del signo de #
#tudiv es el id de tu div (que tiene los estilos) <div id="midiv"> el id seria midiv por lo que bastaria hacer el efecto de retardo dejandolo en este ejemplo asi :
<!DOCTYPE html>
<html>
<head>
  <style>
  
    div { margin:3px; width:80px; display:none;
      height:80px; float:left; }
      div#midiv { background:#f00; }
      
    </style>
  <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
  
     <div id="midiv">Hola como estas</div>
    
<script>
     
        $("#midiv").fadeIn(5000);
    
    </script>

</body>
</html>

Saludos xD
victor5atodogas · · Solicitar retirada
Muchas gracias, el efecto funcionar funciona como se puede ver aqui:

http://www.jonathandiazm.com/retardo.html

La cosa es que aqui no funciona:

http://www.jonathandiazm.com/galerias


Quizas el error este en que pretendo aplicarle el efecto a una capa dentro de otra dentro de otra. En el supuesto de que haya que colocar el codigo ese del script justo antes de cerrar /body no puedo hacerlo, por ello agradeceria que me dijeras como a traves de javascript obligar a que lo ponga SIEMPRE ahi.

Mucha gracias por todo y un saludo.