Categorías
Desarrollo y Programación

jQuery mostrar y ocultar div con animación

En esta ocasión vamos a mostrar y ocultar div con jQuery para practicar el funcionamiento base de la librería. vamos a asignar eventos a dos botones que nos permitan interactuar con la visualización de un componente.

En esta ocasión traigo la actualización de un código que hice hace unos siete años para este blog, el cual hice un tutorial en youtube:

El código completo y funcional está aquí:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tutorial jQuery Remasterizado</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
var pagina = $(document);
pagina.on("ready", animar);
function animar() {
var x = $("#mostrar_elemento");
x.on("click", mostrar);
var y = $("#ocultar_elemento");
y.on("click", ocultar);
}
function mostrar() {
var x = $("div");
x.show("slow");
}
function ocultar() {
var x = $("div");
x.hide("slow");
}
</script>
<style>
.ocultado {
display: none;
background-color: #9c0;
border-color: #063;
border-style: dotted;
border: thin;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<input id="mostrar_elemento" type="button" value="Mostrar mensaje" />
<input id="ocultar_elemento" type="button" value="Ocultar" />
<div class="ocultado">
Esta div se esta mostrando sin embargo puede ser cualquier elemento
</div>
</body>
</html>
view raw jquery01.html hosted with ❤ by GitHub

Refactorizar código Javascript

Ahora también tenemos una actualización de un refactor que pueden ver en el siguiente video:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tutorial jQuery Remasterizado</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<button id="showContainer" type="button">Mostrar mensaje</button>
<button id="hideContainer" type="button">Ocultar mensaje</button>
<div class="container hidden">
Esta div se esta mostrando sin embargo puede ser cualquier elemento
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
<script>
$(window).on("load", assignEvents);
function assignEvents() {
$("#showContainer").on("click", mostrar);
$("#hideContainer").on("click", ocultar);
}
function mostrar() {
$("div").show("slow");
}
function ocultar() {
$("div").hide("slow");
}
</script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
.container {
background-color: #9c0;
border-color: #063;
border-style: dotted;
border: thin;
width: 200px;
height: 200px;
}
.hidden {
display: none;
}
view raw style.css hosted with ❤ by GitHub

Este último video trata de seguir buenas prácticas para evitar el uso innecesario de variables y agregar nombres legibles a las clases e identificadores de HTML y Javascript.

Si tienen alguna duda ponganla en los comentarios 😎