.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 .fadeOut() en jQuery se utiliza para crear una animación de desvanecimiento que reduce gradualmente la opacidad de los elementos seleccionados hasta que se vuelven completamente transparentes (desaparecen). Este método es útil para eliminar visualmente elementos de la página de manera suave y gradual.
Definición del método .fadeOut().
El método .fadeOut() oculta los elementos seleccionados reduciendo su opacidad a 0 en un intervalo de tiempo especificado. Al finalizar la animación, los elementos se configuran como display: none.
Sintaxis:
index.js
JavaScript
$(selector).fadeOut(duration, easing, complete);selector: Un selector que define el conjunto de elementos a los que se aplicará la animación.duration(opcional): El tiempo en milisegundos que debe durar la animación o una palabra clave ("slow"o"fast"). El valor predeterminado es 400 milisegundos.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: Animación de desvanecimiento con duración y easing predeterminado:
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de fadeOut() con Predeterminado.</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() {
$("#botonOcultarRojo").click(function() {
// Desvanece la caja en 400 milisegundos con easing "swing"
$("#cajaRoja").fadeOut();
});
});
</script>
</head>
<body>
<button id="botonOcultarRojo">Ocultar Caja</button>
<div id="cajaRoja"></div>
</body>
</html>
index.js
JavaScript
// Desvanece la caja en 400 milisegundos con easing "swing"
$("#cajaRoja").fadeOut();Explicación del Ejemplo 1:
Al hacer clic en el botón “Ocultar Caja”, la caja roja se desvanecerá en 400 milisegundos utilizando el efecto de easing predeterminado
"swing".Resultado.
Ejemplo 2: Animación de desvanecimiento con duración personalizada y función complete:
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de fadeOut() con Duración y Complete.</title>
<style>
#cajaAzul {
width: 100px;
height: 100px;
background-color: blue;
}
#mensaje {
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() {
// Desvanece la caja en 2000 milisegundos con easing linear
$("#cajaAzul").fadeOut(2000, "linear", function() {
// Muestra un mensaje después de que la caja se desvanezca
$("#mensaje").show().text("¡Caja oculta!");
});
});
});
</script>
</head>
<body>
<button id="botonOcultarAzul">Ocultar Caja con Mensaje</button>
<div id="cajaAzul"></div>
<div id="mensaje"></div>
</body>
</html>
index.js
JavaScript
// Desvanece la caja en 2000 milisegundos con easing "linear"
$("#cajaAzul").fadeOut(2000, "linear", function() {
// Muestra un mensaje después de que la caja se desvanezca
$("#mensaje").show().text("¡Caja oculta!");
});Explicación del Ejemplo 2:
Al hacer clic en el botón “Ocultar Caja con Mensaje”, la caja azul se desvanecerá en 2 segundos utilizando el efecto de easing
"linear". Después de que la caja se haya desvanecido completamente, se mostrará un mensaje que indica que la caja ha sido oculta.Resultado.
jQuery.com
Contenido Relacionado.
Suscribirse
0 Comentarios
Más antiguo