jmarrdiaz
3/10/2016 - 1:05 PM

Ocultando elementos con Jquery - hide() & show()

Ocultando elementos con Jquery - hide() & show()

Si bien, la visibilidad de un elemento en JQuery puede ser dinámicamente cambiado usando los métodos llamados hide() y show(). Simplemente llamamos el método hide() sin ningun argumento inmediatamente se ocultara un elemento que es visible, cómo si fuera la propiedad display en CSS tuviera el valor de none. (ver la publicación Diferencia entre display: none y visibility: hidden) 
 
Llamando el método show() sin ningun argumento instantáneamente mostrará un elemento que está escondido.  
 
Los métodos hide() y show() también pueden aceptar argumentos para especificar la velocidad con la que que visibilidad de un objeto cambia. Los periodos de duración pueden ser especificados numéricamente en milisegundos o por la palabra reservada “slow” (600 milisegundos) o “fast” (200 milisegundos).
 
Opcionalmente, también le podemos adjuntar una función callback cómo segundo argumento a los métodos hide() y show(), la cuál será ejecutada cuando la animación se complete. 
 
Ejemplo en código sobre la funcionalidad del método hide() y show():

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Método hide() y show()</title>
		<link rel="stylesheet" type="text/css" href="css/show.css">
		<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	</head>
	<body>
		<div>Botones que cambian la visibilidad:</div>
		<p>	
			<button id="hide-btn">Hide(esconder)</button>
			<button id="show-btn">Show(mostrar)</button>
			<br>
			<br>Salida: <span id="out"></span>
		</p>
 
	<script type="text/javascript" src="js/show.js"></script>
 
	</body>
</html>

CSS:

div {
	padding: 5px;
	width: 200px;
	height: 30px;
	background: yellow;
	border: 2px dashed red;
}
 
p {
	position: absolute;
	top: 60px;
}
 
JQuery: 

$(document).ready(function() { // Cuando el documento este listo.
 
	$("#hide-btn").on("click", function() { // Cuando se detecta clic en el boton Hide(esconder).
 
		$("div").hide("slow", function() { // Selecciono el div y le aplico el metodo hide para esconderlo a 600 milisegundos.
 
			$("#out").text("Contenido escondido"); // Cuando se esconde el div entonces imprimo un texto.
		});
	});
 
 
	$("#show-btn").on('click', function() {
 
		$("div").show("slow", function() { // Selecciono el div y le aplico el metodo show para mostrarlo a 600 milisegundos.
 
			$("#out").text("Contenido visible");
		});
	});
 
});