Cómo detener la animación o el efecto en jQuery

Cómo detener la animación o el efecto en jQuery

Las animaciones o los efectos hacen que el contenido sea presentable para los usuarios finales. jQuery ofrece varios métodos como animate (), fadein (), fadeout () etc., Para agregar animación o efecto. ¿Qué pasa si quieres detener la animación o el efecto?? También puedes hacerlo, veamos cómo?

El método stop () ayuda a detener la animación o el efecto en jQuery. El método de parada proporciona funcionalidad múltiple, como detener la animación/efecto instantáneamente o secuencialmente. Este artículo demuestra las formas de detener la animación o un efecto en jQuery.

Cómo detener la animación o el efecto en jQuery

El método stop () en jQuery ayuda a detener la animación o efecto que se está ejecutando. La sintaxis del método stop () se muestra a continuación.

$ (selector).parar (clearqueue, jumptoend);

El selector podría ser cualquier elemento HTML o clase/ID del elemento. Además, el método stop () ofrece dos parámetros (que son opcionales pero no necesarios)

  • Clearqueue: Acepta valores booleanos (ya sea verdadero o falso) y decide sobre la detención de las próximas animaciones. El FALSO(Valor predeterminado) Valor ordena que solo se detendrá la animación actual, y se iniciarán otras animaciones en cola después. Mientras que el verdadero El valor termina la animación al instante.
  • jumptoend: Su valor predeterminado es FALSO, Si el verdadero El valor se asigna, luego termina las animaciones y la cola también se borra.

La sintaxis anterior funciona para varios métodos jQuery como el desvanecimiento (), Sliding (), show (), hide () también.

Cómo detener las animaciones en jQuery

Esta sección practica algunos ejemplos que guían para detener las animaciones en varios escenarios utilizando el método stop ().

Ejemplo 1: Uso del método stop () sin parámetros

El código anterior anima el Ancho del Div con una velocidad de milisegundos = "5000". Además, el método stop () detiene la animación en curso.

Producción

Antes de animar

Después de aplicar el método stop () al azar (parar en cualquier lugar)

Ejemplo 2: Uso del método stop () con parámetros

El siguiente método de prácticas de código parada () utilizando ambos parámetros. Y el valor del parámetro se establece en verdadero.

El código anterior anima la propiedad de ancho y luego se aplica el método Stop (True, True).

Producción

Antes de hacer alguna acción

Después de comenzar la animación, cuando se hace clic en el botón de detección de detección, la animación termina inmediatamente.

Cómo detener el efecto de desvanecimiento () en jQuery

El método stop () en jQuery también se puede usar para detener un efecto. El código proporcionado a continuación ejerce el efecto de desvanecimiento y luego el método stop () para detener ese efecto.

El código anterior Fadhese el divir a la velocidad de 2500 milisegundos y el método de parada se utiliza para detener el método de desvanecimiento.

Producción

Antes de comenzar/parar del proceso de desvanecimiento

Una vez que se inicia el proceso de desvanecimiento, cuando se haga clic en el botón de parar, el proceso de desvanecimiento se detendrá como se muestra en la imagen a continuación (en nuestro caso).

Conclusión

El método stop () de jQuery se usa para detener la animación o un efecto. El método stop () acepta dos parámetros, y también se puede aplicar sin parámetros. Ambos parámetros son de naturaleza booleana y, por lo tanto, los valores verdaderos/falsos se aceptan solo. Habría aprendido la aplicación del método stop () para detener la animación en jQuery. Además, el método stop () también se ejerce en un método fadeout () en jQuery.