complete
El parámetro complete en jQuery se utiliza para especificar una función de devolución de llamada (callback) que se ejecutará cuando una animación haya terminado. Este parámetro es útil para ejecutar código adicional o desencadenar otras acciones una vez que la animación ha finalizado, permitiendo crear interacciones más complejas y dinámicas.
Nota: El parámetro complete es un componente fundamental que se utiliza en muchos métodos de animación en jQuery. Aunque el término complete podría traducirse como ‘completo’ o ‘terminado’, 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 complete directamente, sino que la sustituiremos por funciones válidas. 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 complete
El parámetro complete define una función que se ejecutará después de que la animación especificada haya concluido. Esta función no recibe argumentos, pero puede acceder al contexto del elemento animado a través de this.
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: Una función de devolución de llamada que se ejecuta cuando la animación ha terminado.
Ejemplos completos en HTML.
Ejemplo 1: Cambiando el color después de la animación.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Parámetro Complete.</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() {
$("#botonMover").click(function() {
$("#caja").animate({
left: "300px"
}, 1000, "linear", function() {
// Esta función se ejecuta después de que la animación ha terminado
$(this).css("background-color", "green");
});
});
});
</script>
</head>
<body>
<button id="botonMover">Mover Caja y Cambiar Color</button>
<div id="caja"></div>
</body>
</html>
$("#caja").animate({
left: "300px"
}, 1000, "linear", function() {
// Esta función se ejecuta después de que la animación ha terminado
$(this).css("background-color", "green");
});Ejemplo 2: Mostrar un mensaje después de la animación
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Parámetro Complete con Mensaje.</title>
<style>
#caja {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
}
#mensaje {
display: none;
margin-top: 20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#botonMover2").click(function() {
$("#caja").animate({
left: "300px"
}, 1000, "swing", function() {
// Esta función se ejecuta después de que la animación ha terminado
$("#mensaje").show().text("¡Animación completada!");
});
});
});
</script>
</head>
<body>
<button id="botonMover2">Mover Caja y Mostrar Mensaje</button>
<div id="caja"></div>
<div id="mensaje">¡Animación completada!</div>
</body>
</html>$("#caja").animate({
left: "300px"
}, 1000, "swing", function() {
// Esta función se ejecuta después de que la animación ha terminado
$("#mensaje").show().text("¡Animación completada!");
});Explicación de los ejemplos.
- Ejemplo 1: Al hacer clic en el botón “Mover Caja y Cambiar Color”, la caja roja se moverá a la derecha con una animación de velocidad constante durante 1 segundo. Una vez que la animación haya terminado, el color de la caja cambiará a verde.
- Ejemplo 2: Al hacer clic en el botón “Mover Caja y Mostrar Mensaje”, la caja azul se moverá a la derecha con una animación que acelera al principio y desacelera al final durante 1 segundo. Una vez que la animación haya terminado, se mostrará un mensaje indicando que la animación ha sido completada.
Resultado:
Ejemplo 1:
Ejemplo 2:
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
