Como parar a animação ou efeito em jQuery

As animações ou efeitos tornam o conteúdo apresentável para usuários finais. JQuery oferece vários métodos como Animate (), Fadein (), Fadeout () etc., Para adicionar animação ou efeito. E se você quiser parar de animação ou efeito? Você pode fazer isso também, vamos ver como?

O método Stop () ajuda a parar de animação ou efeito em jQuery. O método de parada fornece funcionalidade do coletor, como interromper a animação/efeito instantaneamente ou sequencialmente. Este artigo demonstra as maneiras de parar a animação ou um efeito em jQuery.

Como parar a animação ou efeito em jQuery

O método Stop () em jQuery ajuda a interromper a animação ou efeito que está em execução. A sintaxe do método Stop () é mostrada abaixo.

O seletor pode ser qualquer elemento html ou classe/id do elemento. Além disso, o método Stop () oferece dois parâmetros (que são opcionais, mas não necessários)

• Clearqueue: Aceita valores booleanos (verdadeiros ou falsos) e decide sobre a parada das próximas animações. O falso(valor padrão) Valor instrui que apenas a animação atual será interrompida e outras animações na fila serão iniciadas depois. Considerando que a verdadeiro o valor encerra a animação instantaneamente.
• Jumptoend: Seu valor padrão é falso, Se o verdadeiro O valor é atribuído, então termina as animações e a fila também é liberada.

A sintaxe acima funciona para vários métodos de jQuery, como Fading (), Sliding (), Show (), Hide () também.

Como parar as animações em jQuery

Esta seção pratica alguns exemplos que guiam para interromper as animações em vários cenários usando o método Stop ().

Exemplo 1: Usando o método stop () sem parâmetros

O código acima anima o largura do div com uma velocidade de milissegundos = “5000““. Além disso, o método Stop () interrompe a animação em andamento.

Saída

Antes de animar

Depois de aplicar o método STOP () aleatoriamente (parando em qualquer lugar)

Exemplo 2: Usando o método stop () com parâmetros

As seguintes práticas de código STOP () Método usando os dois parâmetros. E o valor do parâmetro está definido como verdadeiro.

O código acima anima a propriedade de largura e, em seguida, o método Stop (True, True) é aplicado.

Saída

Antes de fazer qualquer ação

Depois de iniciar a animação, quando o botão Stop-Animation é clicado, a animação termina imediatamente.

Como parar o efeito de desbotamento () no jQuery

O método Stop () no jQuery pode ser usado para impedir um efeito também. O código fornecido abaixo exerce o efeito de desbotamento e, em seguida, o método stop () para interromper esse efeito.

O código acima fAdes out the Div em velocidade de 2500 milissegundos e o método de parada é usado para interromper o método de desbotamento.

Saída

Antes de iniciar/parar o processo de desbotamento

Após o início do processo de desbotamento, quando o botão de parada for clicado, o processo de desbotamento será interrompido, conforme mostrado na imagem abaixo (no nosso caso).

Conclusão

O método Stop () de jQuery é usado para interromper a animação ou um efeito. O método Stop () aceita dois parâmetros e pode ser aplicado sem parâmetros também. Ambos os parâmetros são de natureza booleana e, portanto, valores verdadeiros/falsos são aceitos apenas. Você teria aprendido a aplicação do método Stop () para parar a animação no jQuery. Além disso, o método STOP () também é exercido em um método Fadeout () em jQuery.