El método .finish() en jQuery se utiliza para detener todas las animaciones en cola y finalizar inmediatamente las animaciones en curso en los elementos seleccionados. Es útil cuando se desea abortar las animaciones en progreso y dejar los elementos en su estado final de animación.
Definición del método .finish()
El método .finish() detiene todas las animaciones en cola y finaliza inmediatamente las animaciones en curso, dejando los elementos en su estado final de animación. Esto incluye las animaciones que están actualmente en ejecución y cualquier animación pendiente en la cola del elemento.
Sintaxis:
$(selector).finish();selector: Un selector que define el conjunto de elementos a los que se aplicará el método.
Ejemplos completos en HTML.
Ejemplo 1: Finalizar una animación en curso
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de finish().</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() {
$("#botonAnimar").click(function() {
// Inicia una animación para aumentar la altura de la caja
$("#cajaRoja").animate({ height: "200px" }, 5000);
});
$("#botonFinalizar").click(function() {
// Finaliza inmediatamente cualquier animación en curso en la caja
$("#cajaRoja").finish();
});
});
</script>
</head>
<body>
<button id="botonAnimar">Animar Caja</button>
<button id="botonFinalizar">Finalizar Animación</button>
<div id="cajaRoja"></div>
</body>
</html>// Finaliza inmediatamente cualquier animación en curso en la caja
$("#cajaRoja").finish();Explicación del Ejemplo 1:
- Al hacer clic en el botón “Animar Caja”, la caja roja comienza a aumentar su altura de 100px a 200px en 5 segundos.
- Si se hace clic en el botón “Finalizar Animación” durante la animación, la animación se detiene inmediatamente y la caja se queda en su estado final al momento de la interrupción.
Resultado.
Ejemplo 2: Finalizar múltiples animaciones en cola.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de finish() con Múltiples Animaciones.</title>
<style>
#cajaAzul {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#botonIniciarAnimaciones").click(function() {
// Inicia múltiples animaciones en cola para la caja azul
$("#cajaAzul")
.animate({ width: "200px" }, 3000)
.animate({ height: "200px" }, 3000)
.animate({ opacity: 0.5 }, 3000);
});
$("#botonFinalizarAnimaciones").click(function() {
// Finaliza inmediatamente cualquier animación en cola o en curso en la caja
$("#cajaAzul").finish();
});
});
</script>
</head>
<body>
<button id="botonIniciarAnimaciones">Iniciar Animaciones</button>
<button id="botonFinalizarAnimaciones">Finalizar Animaciones</button>
<div id="cajaAzul"></div>
</body>
</html>// Finaliza inmediatamente cualquier animación en cola o en curso en la caja
$("#cajaAzul").finish();Explicación del Ejemplo 2:
- Al hacer clic en el botón “Iniciar Animaciones”, la caja azul inicia una serie de animaciones en cola: primero aumenta su ancho, luego su altura y finalmente cambia su opacidad.
- Si se hace clic en el botón “Finalizar Animaciones” en cualquier momento durante estas animaciones, todas las animaciones en cola y en curso se detienen inmediatamente, y la caja se queda en su estado final al momento de la interrupción.
Resultado.
jQuery.com
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
