.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ásEl 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:
$(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.
<!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>
// Oculta la caja roja inmediatamente
$("#cajaRoja").hide();
Explicación del Ejemplo 1:
Resultado.
Ejemplo 2: Ocultar un elemento con animación personalizada.
<!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>
$("#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.
.ready() ejecuta JavaScript cuando el DOM está cargado y listo, asegurando que el código no se ejecute antes de que existan los elementos del DOM.
Leer más`.show()` muestra elementos ocultos, restableciendo su visualización. Útil para hacer visibles elementos ocultos, con una animación suave si se especifica una duración.
Leer más`.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.text() de jQuery obtiene o establece el contenido de texto de elementos seleccionados, a diferencia de .html() que incluye etiquetas HTML.
Leer másEl parámetro `complete` en jQuery especifica una función callback que se ejecuta al finalizar una animación, útil para ejecutar código adicional o desencadenar acciones.
Leer másEl parámetro `duration` especifica el tiempo de animación en milisegundos. Puedes usar valores numéricos o palabras clave predefinidas para definir la duración.
Leer másEl parámetro `easing` en jQuery especifica el tipo de animación y controla la velocidad y comportamiento durante métodos como `.fadeIn()` y `.slideUp()`.
Leer másLos selectores en jQuery son patrones para seleccionar elementos del DOM, permitiendo aplicar efectos, manipular propiedades o agregar eventos, similar a los selectores en CSS.
Leer más