Introducción:
El parámetro duration en jQuery es una parte clave de los métodos de animación como .fadeIn(), .fadeOut(), .slideUp(), .slideDown(), entre otros. Este parámetro determina cuánto tiempo debe durar la animación, permitiendo personalizar la velocidad de las transiciones y efectos.
Nota: El parámetro duration es un componente fundamental que se utiliza en muchos métodos de animación en jQuery. Aunque el término duration podría traducirse como “duración“, he decidido mantener todos los nombres de los parámetros en inglés. Esto facilita la relación con la documentación oficial en jquery.com. Al utilizar este parámetro, no usaremos la palabra duration directamente, sino que la sustituiremos por valores válidos. Sin embargo, usar los términos en inglés ayudará a comprender mejor los ejemplos y la documentación en el sitio oficial.
Definición del Parámetro duration.
El parámetro duration especifica el tiempo que tomará completar una animación en milisegundos. Se pueden utilizar valores numéricos o palabras clave predefinidas para establecer la duración de la animación.
Sintaxis del parámetro duration.
$(selector).fadeIn(duration, easing, complete);selector: Un selector que define el conjunto de elementos a los que se aplicará la animación.duration: El tiempo en milisegundos que debe durar la animación. También puede ser una cadena con valores predefinidos.easing(opcional): El tipo de animación que se debe usar (por ejemplo,"swing"o"linear").complete(opcional): Una función de devolución de llamada que se ejecuta cuando la animación ha terminado.
Valores aceptables para duration.
- Valores numéricos: Puedes especificar cualquier valor numérico en milisegundos. Por ejemplo,
1000para una duración de 1 segundo. - Palabras clave:
"slow": Define una duración de 600 milisegundos."fast": Define una duración de 200 milisegundos.
Ejemplos completos en HTML.
Ejemplo 1: Utilizando valores numéricos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Duración con Valor Numérico.</title>
<style>
.oculto {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#botonMostrar1").click(function() {
// Muestra el párrafo oculto con una duración de 1000 milisegundos (1 segundo)
$("#parrafoOculto1").fadeIn(1000);
});
});
</script>
</head>
<body>
<button id="botonMostrar1">Mostrar Párrafo (1 segundo)</button>
<p id="parrafoOculto1" class="oculto">Este párrafo se mostrará en 1 segundo.</p>
</body>
</html>// Muestra el párrafo oculto con una duración de 1000 milisegundos (1 segundo)
$("#parrafoOculto1").fadeIn(1000);Ejemplo 2: Utilizando palabras clave.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Duración con Palabras Clave.</title>
<style>
.oculto {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#botonMostrar2").click(function() {
// Muestra el párrafo oculto con la duración de "slow" (600 milisegundos)
$("#parrafoOculto2").fadeIn("slow");
});
$("#botonMostrar3").click(function() {
// Muestra el párrafo oculto con la duración de "fast" (200 milisegundos)
$("#parrafoOculto3").fadeIn("fast");
});
});
</script>
</head>
<body>
<button id="botonMostrar2">Mostrar Párrafo (lento)</button>
<p id="parrafoOculto2" class="oculto">Este párrafo se mostrará lentamente (600 milisegundos).</p>
<button id="botonMostrar3">Mostrar Párrafo (rápido)</button>
<p id="parrafoOculto3" class="oculto">Este párrafo se mostrará rápidamente (200 milisegundos).</p>
</body>
</html>// Muestra el párrafo oculto con la duración de "slow" (600 milisegundos)
$("#parrafoOculto2").fadeIn("slow");
// Muestra el párrafo oculto con la duración de "fast" (200 milisegundos)
$("#parrafoOculto3").fadeIn("fast");Explicación de los ejemplos.
- Ejemplo 1: Al hacer clic en el botón “Mostrar Párrafo (1 segundo)“, el párrafo oculto se muestra gradualmente durante un segundo (1000 milisegundos).
- Ejemplo 2: Al hacer clic en el botón “Mostrar Párrafo (lento)“, el párrafo oculto se muestra gradualmente durante 600 milisegundos. Al hacer clic en el botón “Mostrar Párrafo (rápido)“, el párrafo oculto se muestra gradualmente durante 200 milisegundos.
Estos ejemplos demuestran cómo el parámetro duration puede personalizar la velocidad de las transiciones y crear efectos visuales variados al mostrar elementos ocultos.
Resultado:
Ejemplo 1:
Este párrafo se mostrará en 1 segundo.
Ejemplo 2:
Este párrafo se mostrará lentamente (600 milisegundos).
Este párrafo se mostrará rápidamente (200 milisegundos).
Contenido Relacionado.
.fadeOut()
`.fadeOut()` crea una animación que reduce gradualmente la opacidad de los elementos seleccionados hasta que desaparecen, útil para eliminar visualmente elementos suavemente.
Leer más
.slideUp()
`.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
