Hacer aparecer y disaparecer un div en un tiempo establecido

En este artículo vamos a ver cómo hacer desaparecer o aparecer un contenedor o div en un tiempo establecido

Para conseguir este efecto vamos a utilizar una función javascript que te puede resultar familiar: setTimeout().


Si queremos disponer de un contenedor que tras x segundos, puedes cambiar los 3000 en el tiempo que queremos que desaparezca necesitaremos añadir en nuestro <head> el siguiente código jQuery:

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    setTimeout(function() {
        $(".content").fadeOut(1500);
    },3000);
});
</script>

Si lo dejamos tal como esta al pasar 3 segundos desaparecer el contenedor con class=”content”.

Donde queremos el DIV ponemos:

<div class="content">Hola, voy a desaparecer en 3 segundos!</div>

Y si quisiéramos hacer aparecer un el DIV tras cumplirse x segundos, puedes cambiar los 3000 en el tiempo que tu desees, necesitaremos incorporar en nuestro <head> el siguiente código jQuery:

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {  
    setTimeout(function() {
        $(".content2").fadeIn(1500);
    },3000);
});
</script>

Si lo dejamos tal como esta al pasar 3 segundos para hacer aparecer el DIVcon class=”content2”.

Ejemplo:
El nuevo DIV parecerá en 3 segundos! y yo desaparecere
Share on Google Plus

Acerca de Unknown

La informática es mi hobby, mi profesión y mi pasión. Soy un afortunado usuario y desarrollador, me gusta compartir lo poco que se y aprendo con los demas