JavaScriptJQuery biblioteca de JavaScript

Desaparecer o apacerecer un div al transcurrir unos segundos con jQuery

Desaparecer o aparecer un div al transcurrir unos segundos con jQuery. En esta entrada nos enfocaremos en el manejo de una capa «DIV» a hacer desaparecer o aparecer mediante el lenguaje jQuery tras unos segundos de manera dinámica.

Para conseguir este efecto vamos a utilizar una función JavaScript «setTimeout()» y lo vincularemos con jQuery para lograr tal efecto de desvanecimiento.

Desaparecer o apacerecer un div al transcurrir unos segundos con jQuery

Hoy en día cuando realizamos sistemas web insertamos registros a la base de datos, eliminamos registros y se requiere de mensajes para comunicar al usuario que tal petición se realizó correctamente o no se realizó. Sin embargo, podemos utilizar estos efectos con jQuery y necesitaremos añadir en nuestro fichero en la etiqueta <head> los siguientes códigos:

Librería jQuery

<!--Utilizaremos la libreria jQuery con la version 3.3.1-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>

Las funciones que realizaran el efecto desaparecer y/o aparecer una capa en HTML

<script type="text/javascript">
//Funcion que hace desaparecer el div transcurridos 3000 milisegundos!
$(document).ready(function() {
    setTimeout(function() {
		// Declaramos la capa mediante una clase para ocultarlo
        $(".midiv").fadeOut(1500);
    },3000);
});

$(document).ready(function() {
	setTimeout(function() {
		// Declaramos la capa  mediante una clase para ocultarlo
        $(".midiv2").fadeIn(1500);
		// Transcurridos 5 segundos aparecera la capa midiv2
    },5000);
});

</script>

No olvidarnos también de los estilos que utilizaremos para aplicar a las capas

<style type="text/css">
.midiv {
	width:940px;
	margin:0 auto;
	height:250px;
	padding:20px;
	background-color: #F00;
	color: #FFF;
	font-family:Verdana, Geneva, sans-serif;
	display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
	text-align:center;
	font-size:25px;
	
}

.midiv2 {
	width:900px;
	margin:0 auto;
	height:50px;
	padding:10px;
	background-color: #000;
	color:#FFF;
	vertical-align: middle;
	display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
	font-family:Verdana, Geneva, sans-serif;
	text-align:center;
	font-size:25px;
}
body{ background:#CCC}
</style>

En nuestra etiqueta body declaramos las 2 capas con sus respectivas clases «.midiv» y «.midiv2»

<body>
<div class="midiv">Saludos, Soy una capa y voy a desaparecer en 3 segundos!</div>
<div class="midiv2" style="display:none;">Saludos, Soy un DIV que apareció luego de 5 segundos!</div>
</body>

Desaparecer un div luego de 3 segundos.

Desaparecer un div con jQuery
Desaparecer un div con jQuery

Aparecer un div luego de 5 segundos

Aparecer un div con jQuery
Aparecer un div con jQuery

Código completo en HTML5

<!DOCTYPE html>
<html>
<head>
	<title>Desaparecer o aparecer un div al transcurrir unos segundos con jQuery</title>
    <meta charset="utf-8">
<style type="text/css">
.midiv {
	width:940px;
	margin:0 auto;
	height:250px;
	padding:20px;
	background-color: #F00;
	color: #FFF;
	font-family:Verdana, Geneva, sans-serif;
	display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
	text-align:center;
	font-size:25px;
	
}

.midiv2 {
	width:900px;
	margin:0 auto;
	height:50px;
	padding:10px;
	background-color: #000;
	color:#FFF;
	vertical-align: middle;
	display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
	font-family:Verdana, Geneva, sans-serif;
	text-align:center;
	font-size:25px;
}
body{ background:#CCC}
</style>
<!--Utilizaremos la libreria jQuery con la version 3.3.1-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
//Funcion que hace desaparecer el div transcurridos 3000 milisegundos!
$(document).ready(function() {
    setTimeout(function() {
		// Declaramos la capa mediante una clase para ocultarlo
        $(".midiv").fadeOut(1500);
    },3000);
});

$(document).ready(function() {
	setTimeout(function() {
		// Declaramos la capa  mediante una clase para ocultarlo
        $(".midiv2").fadeIn(1500);
		// Transcurridos 5 segundos aparecera la capa midiv2
    },5000);
});

</script>
</head>

<body>
<div class="midiv">Saludos, Soy una capa y voy a desaparecer en 3 segundos!</div>
<div class="midiv2" style="display:none;">Saludos, Soy un DIV que apareció luego de 5 segundos!</div>
</body>
</html>
Desaparecer o aparecer un div al transcurrir unos segundos con jQuery
Desaparecer o aparecer un div al transcurrir unos segundos con jQuery

CONCLUSIÓN

Su uso se va incrementando día tras día para darle dinamismo a nuestros proyectos web y/o páginas web. Muy recomendable, para mostrar información momentánea, por ejemplo, él envió de información a una base de datos.
Este código es muy fácil de implementar en cualquier proyecto web.

DEMO

Ver Demo

DESCARGA

Descargar Código Fuente

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad