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.

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.