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.
Aparecer un div luego de 5 segundos
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>
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
[button-green url=»https://www.baulphp.com/Ejemplos/JQuery/Desaparecer-o-aparecer-un-div-al-transcurrir-unos-segundos-con-jQuery» target=»_blank» position=»left»]Ver Demo[/button-green]
[divider]
DESCARGA
Desaparecer o aparecer un div al transcurrir unos segundos con jQuery