Nueva entrada para repasar la función de jQuery finish() que sirve para finalizar y detener las funciones en ejecución.
Es muy similar a la función stop() con los parámetros stop(true, true), la única diferencia entre ambas es la de que las propiedades CSS de las animaciones encoladas pasan a su estado final.
Quizás os puedan ser de utilidad estos otros post sobre las colas en jQuery:
- Introducción a las colas de jQuery con queue(), dequeue() y clearQueue()
- jQuery delay(): Retrasar la ejecución de funciones de una cola
Sintaxis de jQuery finish()
Veamos la sintaxis extraída de su web oficial:
1 |
$(selector).finish(Cola); |
Os explico los parámetros:
- selector (Obligatorio): Elemento del DOM donde se desarrollan las animaciones y funciones.
- Cola (Opcional): Nombre de la cola de funciones a finalizar.
Ejemplo de jQuery finish()
Vamos a probar su funcionalidad en este sencillo ejemplo:
1 2 3 4 5 6 7 8 |
$("#comenzarefectos").click(function(){ $("#funciones").slideUp(6000); $("#funciones").slideDown(6000); }); $("#finaliza").click(function(){ $("#funciones").finish(); }); |
Os explico el ejemplo con los 2 primeros botones:
- Detecto el click en el botón con id = ‘comenzarefectos‘, entonces aplicamos 2 efectos de 6 segundos de duración cada uno. Son slideUp y slideDown para ocultar y mostrar el rectángulo.
- Después podemos finalizar la ejecución de las 2 funciones detectando el click en el botón con id = ‘finaliza’. Dependiendo de cuando clickemos finalizaremos una o las 2 funciones. Para que os de tiempo a observar como se detienen les he puesto 6 segundos de duración.
1 2 3 4 5 6 7 8 9 10 |
var MiColaDeFunciones = $("#funciones"); $("#botoncomenzarcola").click(function(){ MiColaDeFunciones.fadeOut(6000); MiColaDeFunciones.fadeIn(6000); }); $("#botonfinishcola").click(function(){ MiColaDeFunciones.finish(); }); |
Os explico el ejemplo con los 2 botones que trabajan con colas de funciones, para el ejemplo se crea la cola ‘MiColaDeFunciones‘ en el selector ‘#funciones‘:
- Detecto el click en el botón con id = ‘botoncomenzarcola‘, entonces aplicamos 2 efectos de 6 segundos de duración cada uno. Son fadeOut y fadeIn para ocultar y mostrar el rectángulo.
- Con el click en el botón con id = ‘botonfinishcola‘ finalizo todas las funciones de la cola que se estén ejecutando o pendientes de ejecutarse. La cola es vaciada.
Selectores de jQuery
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: