Introducción.
El parámetro easing en jQuery se utiliza para especificar el tipo de animación que se aplicará durante los métodos de animación, como .fadeIn(), .fadeOut(), .slideUp(), .slideDown(), entre otros. easing controla la velocidad y el comportamiento de la animación a lo largo de su duración, permitiendo crear efectos más naturales y atractivos.
Nota: El parámetro easing es un componente fundamental que se utiliza en muchos métodos de animación en jQuery. Aunque el término easing podría traducirse como ‘suavizado’ o ‘aceleració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 easing 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 easing.
El parámetro easing define la función de aceleración o desaceleración que se utiliza durante la animación. Este parámetro permite ajustar cómo cambia la velocidad de la animación en el transcurso del tiempo, ofreciendo una gama de efectos visuales
Sintaxis.
$(selector).animate(properties, duration, easing, complete);selector: Un selector que define el conjunto de elementos a los que se aplicará la animación.properties: Las propiedades CSS a animar, comoleft,top,width,height, etc.duration: El tiempo en milisegundos que debe durar la animación o una palabra clave ("slow"o"fast").easing: El tipo de función de aceleración que se debe utilizar para la animación. Ejemplos comunes incluyen"swing"y"linear".complete(opcional): Una función de devolución de llamada que se ejecuta cuando la animación ha terminado.
Valores aceptables para easing.
"linear": La velocidad de la animación es constante a lo largo del tiempo."swing": La velocidad de la animación cambia en forma de curva de campana, acelerando al principio y desacelerando al final (valor predeterminado)
Ejemplos.
Ejemplo 1: Utilizando "linear"
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Easing con Linear.</title>
<style>
#caja {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#botonMover1").click(function() {
// Mueve la caja a la derecha con easing "linear" (velocidad constante)
$("#caja").animate({
left: "300px"
}, 1000, "linear");
});
});
</script>
</head>
<body>
<button id="botonMover1">Mover Caja con Easing Linear</button>
<div id="caja"></div>
</body>
</html>// Mueve la caja a la derecha con easing "linear" (velocidad constante)
$("#caja").animate({
left: "300px"
}, 1000, "linear");Ejemplo 2: Utilizando "swing"
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Easing con Swing.</title>
<style>
#caja2 {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#botonMover2").click(function() {
// Mueve la caja a la derecha con easing "swing" (velocidad variable en forma de curva de campana)
$("#caja2").animate({
left: "300px"
}, 1000, "swing");
});
});
</script>
</head>
<body>
<button id="botonMover2">Mover Caja con Easing Swing</button>
<div id="caja2"></div>
</body>
</html>$("#botonMover2").click(function() {
// Mueve la caja a la derecha con easing "swing" (velocidad variable en forma de curva de campana)
$("#caja2").animate({
left: "300px"
}, 1000, "swing");
});Explicación de los ejemplos.
- Ejemplo 1: Al hacer clic en el botón “Mover Caja con Easing Linear”, la caja roja se moverá a la derecha con una animación de velocidad constante durante 1 segundo.
- Ejemplo 2: Al hacer clic en el botón “Mover Caja con Easing Swing”, la caja azul se moverá a la derecha con una animación que acelera al principio y desacelera al final durante 1 segundo.
Resultado.
Ejemplo 1: Utilizando "linear"
Ejemplo 2: Utilizando "swing"
Contenido Relacionado.
.animate() de jQuery crea animaciones personalizadas cambiando gradualmente los valores CSS de elementos seleccionados, añadiendo interactividad y dinamismo a las páginas web.
Leer más
`.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()` 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
