El método hide() en jQuery se usa para ocultar los elementos web seleccionados. En este artículo, discutiremos el método hide() en detalle. Este método generalmente se usa para efectos o animaciones en jQuery. También nos permite animar el comportamiento (transición) de ocultar algún elemento específico.
Sintaxis:
.hide( duration, easing, complete )
Parámetros: Este método tiene los siguientes parámetros:
- duración: determinará cuánto tiempo se ejecutará cualquier animación. Podría ser una string o un número. Los valores posibles son “rápido”, “lento” o el tiempo en milisegundos. El valor predeterminado es 400 (en ms).
- easing: Determinará qué función de easing se está utilizando para la transición del elemento. Los valores posibles son «oscilación» y «lineal». El valor predeterminado es «oscilación».
- complete: esta función se llama cuando se completa la animación. Esta función se llamará cada vez por cada elemento web seleccionado.
Nota: si no usamos ninguno de los parámetros, el elemento simplemente se ocultará sin ninguna transición o efecto especial. No tenemos que usar cada parámetro cada vez, podemos usar cualquiera de estos para nuestra conveniencia.
Ahora hablemos de cómo podemos usar este método para facilitar las cosas. Podemos usarlo para ocultar el elemento seleccionado al hacer clic en un botón , al pasar el mouse, y hacer clic en el elemento mismo y también podemos configurar un temporizador para que después del retraso, el elemento seleccionado se oculte.
Veamos algunos ejemplos del método hide() para una mejor comprensión de su funcionamiento.
Enlace CDN: El siguiente archivo de la biblioteca jQuery se utiliza en todos los códigos para su funcionamiento, que se incluye en la sección <head> de cada código HTML.
https://code.jquery.com/jquery-3.6.0.min.js
Ejemplo 1: En este ejemplo, estableceremos el método hide() en un botón, de modo que cuando se haga clic en el botón, el elemento seleccionado se ocultará. Los elementos pueden ser una imagen, div, h1, etc.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN link. -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(24, 24, 24);
height: 100vh;
}
button {
margin: 50px;
height: 50px;
width: 100px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1><b>GeeksforGeeks</b></h1>
<button id="btn">Hide</button>
</div>
<!-- Using hide() method to hide <h1/> element. -->
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("h1").hide();
});
});
</script>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, si pasamos el cursor sobre el elemento seleccionado, se ocultará. Use este fragmento de código y reemplace el código en la etiqueta <body> del Ejemplo 1 para obtener este resultado.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN link. -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(24, 24, 24);
height: 100vh;
}
button {
margin: 50px;
height: 50px;
width: 100px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1><b>GeeksforGeeks</b></h1>
</div>
<!-- Using hide() method to hide <h1/> element. -->
<script>
$(document).ready(function () {
$("h1").hover(function () {
$("h1").hide();
});
});
</script>
</body>
</html>
Producción:
Ejemplo 3: Para este ejemplo, configuraremos un temporizador de 2 segundos, después de pasar ese tiempo, el elemento seleccionado se ocultará cada vez que hagamos clic en el botón ocultar. Use este fragmento de código y reemplace el código dentro de la etiqueta <body> del ejemplo 1 para obtener este resultado.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN link. -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(24, 24, 24);
height: 100vh;
}
button {
margin: 50px;
height: 50px;
width: 100px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1><b>GeeksforGeeks</b></h1>
<button id="btn">Hide</button>
</div>
<!-- Using hide() method to hide <h1/> element. -->
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("h1").delay(2000).hide("fast");
});
});
</script>
</body>
</html>
Producción:
Ejemplo 4: En este ejemplo, usaremos el parámetro de duración y aplicaremos transiciones de ocultación lentas y rápidas del elemento seleccionado. Tenemos dos elementos de texto y dos botones, uno ocultará el texto lentamente y el segundo ocultará el texto al instante. Use este fragmento de código en el Ejemplo 1.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN link. -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(24, 24, 24);
height: 100vh;
}
button {
margin: 50px;
height: 50px;
width: 100px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1><b>GeeksforGeeks</b></h1>
<button id="btn">Slow hide</button>
<h2><b>GeeksforGeeks</b></h2>
<button id="btn1">Fast hide</button>
</div>
<!-- Using hide() method to hide <h1/> element. -->
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("h1").hide("slow");
});
$("#btn1").click(function () {
$("h2").hide("fast");
});
}
);
</script>
</body>
</html>
Producción:
Ejemplo 5: para este ejemplo, veremos cómo podemos usar la función de devolución de llamada para que cuando se complete el efecto de ocultación, se llame a la función. Estableceremos un mensaje de alerta después de completar el efecto de ocultación. Use este fragmento de código en el Ejemplo 1.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN link. -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(24, 24, 24);
height: 100vh;
}
button {
margin: 50px;
height: 50px;
width: 100px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1><b>GeeksforGeeks</b></h1>
<button id="btn">Slow hide</button>
</div>
<!-- Using hide() method to hide <h1/> element. -->
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("h1").hide("slow",function(){
alert('The text is hidden!')
});
});
}
);
</script>
</body>
</html>
Producción:
