.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 .fadeIn() de jQuery permite que los elementos seleccionados aparezcan gradualmente al aumentar su opacidad desde 0 hasta 1. Esto se utiliza para crear efectos de transición suaves al mostrar elementos ocultos.
Definición:
El método .fadeIn() cambia la opacidad de los elementos seleccionados desde 0 (totalmente transparente) hasta 1 (totalmente visible) de manera gradual.
Sintaxis:
index.js
JavaScript
$(selector).fadeIn(duration, easing, complete);selector: Un selector que define el conjunto de elementos a los que se aplicará el efecto de desvanecimiento.duration(opcional): El tiempo en milisegundos durante el cual debe durar el efecto de desvanecimiento. Puedes usar palabras clave comoslowofastpara tiempos predefinidos.easing(opcional): El tipo de animación que se debe usar (por ejemplo,swingolinear).complete(opcional): Una función de devolución de llamada que se ejecuta cuando la animación ha terminado.
Ejemplo:
Mostrar un párrafo con un efecto de desvanecimiento.
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo .fadeIn().</title>
<style>
.oculto {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#botonMostrar").click(function() {
// Muestra el párrafo oculto con un efecto de desvanecimiento durante 1000 milisegundos
$("#parrafoOculto").fadeIn(1000);
});
});
</script>
</head>
<body>
<button id="botonMostrar">Mostrar Párrafo</button>
<p id="parrafoOculto" class="oculto">Este es un párrafo que se mostrará con un efecto de desvanecimiento.</p>
</body>
</html>
index.js
JavaScript
// Muestra el párrafo oculto con un efecto de desvanecimiento durante 1000 milisegundos
$("#parrafoOculto").fadeIn(1000);Explicación del Ejemplo:
En este ejemplo, hay un párrafo con el id parrafoOculto que está inicialmente oculto mediante la clase oculto. Al hacer clic en el botón “Mostrar Párrafo”, se ejecuta una función que:
- Selecciona el párrafo oculto con
$("#parrafoOculto"). - Usa
.fadeIn(1000)para mostrar el párrafo con un efecto de desvanecimiento que dura 1000 milisegundos (1 segundo).
Este efecto permite que el párrafo aparezca gradualmente en lugar de aparecer de manera instantánea, creando una transición suave.
Resultado.
Este es un párrafo que se mostrará con un efecto de desvanecimiento.
jQuery.com
Contenido Relacionado.
Suscribirse
0 Comentarios
Más antiguo