Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


jQuery stop(): Detener animaciones y efectos

Vamos a repasar la función de jQuery stop(), la funcionalidad es la de detener las funciones o efectos que se estén ejecutando antes de que finalicen.

Otras funciones para trabajar con las ejecuciones de las funciones en jQuery son:

Sintaxis de jQuery stop()

Veamos la sintaxis extraída de su web oficial:

Os explico los parámetros:

  • selector (Opcional): Por defecto detiene el efecto o función que se está ejecutando. Si se pasa el selector se paralizará la función o cola relacionada.
  • stopAll (Opcional): Este parámetro especifica si la cola de funciones del selector debe detenerse por completo. Por defecto es ‘false‘ por lo que solo se detiene la ejecución de la función actual, posteriormente el resto de funciones se siguen ejecutando.
  • goToEnd (Opcional): Por defecto su valor es ‘false’, especifica si la ejecución actual de la función debe completarse.

Ejemplos de jQuery stop()

Os voy a poner una serie de ejemplos de jQuery stop() para ver su funcionalidad:

Os explico el ejemplo con los 3 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 detener la ejecución de las 2 funciones detectando el click en el botón con id = ‘paratodo’. Dependiendo de cuando clickemos pararemos una o las 2 funciones. Para que os de tiempo a observar como se detienen les he puesto 6 segundos de duración.
  • Por último detectamos el click en el botón con id = ‘finalizaefectoactual‘ para finalizar el efecto que e este ejecutando y que se ejecute el siguiente. El parámetro false hace que no se paralicen el resto de efectos y el parámetro true hace que se finalice el efecto.

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 = ‘botonstopcoladetengo todas las funciones de la cola que se estén ejecutando o pendientes de ejecutarse.

El código HTML de los botones y el rectángulo es el siguiente:

jQuery stop() también puede paralizar animaciones como animate(), show y hide(), toggle()

Selectores de jQuery

Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies