.click() de jQuery adjunta un evento de clic a elementos seleccionados o lo desencadena, manejando eventos de forma compatible con todos los navegadores.
Leer másMétodos.
Métodos.
El método .hide() en jQuery se utiliza para ocultar elementos seleccionados en una página web. A diferencia del método .slideUp(), que oculta los elementos mediante una animación deslizante, .hide() simplemente hace que los elementos sean invisibles sin ningún efecto de animación.
Definición del método .hide()
El método .hide() oculta los elementos seleccionados estableciendo su propiedad CSS display en none. Puede aceptar parámetros opcionales para definir la duración de la animación y una función de devolución de llamada que se ejecuta después de que la animación ha terminado.
Sintaxis:
index.js
JavaScript
$(selector).hide(duration, easing, complete);selector: Un selector que define el conjunto de elementos a los que se aplicará el método.duration(opcional): El tiempo en milisegundos que debe durar la animación o una palabra clave ("slow"o"fast"). Si no se especifica, el ocultamiento es inmediato.easing(opcional): El tipo de función de aceleración que se debe utilizar para la animación. Los valores comunes son"swing"(predeterminado) y"linear".complete(opcional): Una función de devolución de llamada que se ejecuta cuando la animación ha terminado.
Ejemplos completos en HTML.
Ejemplo 1: Ocultar un elemento sin animación.
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de hide() sin Animación.</title>
<style>
#cajaRoja {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#botonOcultarRoja").click(function() {
// Oculta la caja roja inmediatamente
$("#cajaRoja").hide();
});
});
</script>
</head>
<body>
<button id="botonOcultarRoja">Ocultar Caja</button>
<div id="cajaRoja"></div>
</body>
</html>
index.js
JavaScript
// Oculta la caja roja inmediatamente
$("#cajaRoja").hide();Explicación del Ejemplo 1:
Al hacer clic en el botón “Ocultar Caja”, la caja roja se ocultará de inmediato sin ninguna animación.
Resultado.
Ejemplo 2: Ocultar un elemento con animación personalizada.
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de hide() con Animación.</title>
<style>
#cajaAzul {
width: 100px;
height: 100px;
background-color: blue;
}
#mensajeOcultar {
display: none;
margin-top: 20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#botonOcultarAzul").click(function() {
$("#cajaAzul").hide(2000, "swing", function() {
// Muestra un mensaje después de que la caja se oculte
$("#mensajeOcultar").show().text("¡Caja oculta!");
});
});
});
</script>
</head>
<body>
<button id="botonOcultarAzul">Ocultar Caja con Mensaje</button>
<div id="cajaAzul"></div>
<div id="mensajeOcultar"></div>
</body>
</html>
index.js
JavaScript
$("#cajaAzul").hide(2000, "swing", function() {
// Muestra un mensaje después de que la caja se oculte
$("#mensajeOcultar").show().text("¡Caja oculta!");
});Explicación del Ejemplo 2:
Al hacer clic en el botón “Ocultar Caja con Mensaje”, la caja azul se ocultará en 2 segundos utilizando el efecto de easing “swing”. Después de que la caja se haya ocultado completamente, se mostrará un mensaje que indica que la caja ha sido ocultada.
Resultado.
jQuery.com
Contenido Relacionado.
`.slideUp()` oculta un elemento con una animación deslizante hacia arriba, colapsándolo desde su altura completa hasta desaparecer, a diferencia de `.hide()`, que solo oculta.
Leer más
