Como criar animações personalizadas no jQuery

As animações adicionam vários efeitos de embelezamento para envolver os espectadores. JQuery suporta uma longa lista de métodos para executar várias operações. O método jQuery Animate () é usado para criar animações personalizadas no jQuery. As propriedades do CSS são as principais partes interessadas do método jQuery Animate (). Essas propriedades podem ser animadas em várias velocidades com vários valores. Esta postagem tem como objetivo fornecer diretrizes detalhadas sobre animações no jQuery com os seguintes resultados de aprendizagem

• mecanismo de trabalho do método Animate ()
• Criando animações personalizadas (usando exemplos)

Como Animate () Método funciona no jQuery

O método Animate () usado para criar animações tem a seguinte sintaxe.

A sintaxe fornecida acima tem as seguintes instâncias

• Seletor pode ser qualquer nome de elemento, classe ou ID de um elemento
• O Css Parte do método Animate () é obrigatório para animações e a propriedade CSS que você deseja animar ficaria no Css parte da sintaxe
• O velocidade define o duração da animação e pode ser definido como "rápido", "lento" ou em milissegundos (valor numérico)
• Por fim, o ligar de volta é um parâmetro opcional e é usado para mostrar algum processamento depois que a animação é realizada

A sintaxe Animate () processa o valor numérico para alterar o CSS. Por exemplo, a propriedade BackgroundColor não pode ser definida usando o nome de cor, portanto, a propriedade CSS Color não está incluída nas animações jQuery. Além disso, os nomes de propriedades devem estar em caso de camelo, como bordercolor, largura de fronteira e assim por diante.

Como criar animações personalizadas no jQuery

Como discutido anteriormente, o método Animate () é praticado para criar animações jQuery. O método Animate pode ser usado nos seguintes cenários

Várias animações de uma só vez: Todas as animações especificadas são realizadas em uma única vez.

Animando as propriedades CSS uma a uma: Nesse caso, o método Animate () é aplicado de maneira seqüencial (um após o outro).

Animação do valor relativo: Normalmente, as propriedades CSS são animadas usando o valor atual de uma propriedade CSS. No entanto, o método Animate () permite executar animações dinâmicas usando o fenômeno de valor relativo.

Praticaríamos as maneiras possíveis nos próximos exemplos.

Exemplo 1: Várias animações de uma só vez

Quase todas as propriedades do CSS podem ser animadas usando o método Animate (). Este exemplo ilustra o efeito de animação jQuery () usando várias propriedades CSS.

No código acima,

• Várias propriedades CSS (largura, altura e tamanho da fonte) do elemento Div serão animadas
• A velocidade está definida para desacelerar

Saída

Antes da animação

Depois da animação

Exemplo 2: um após o outro

O efeito de animação pode ser embelezado animando as propriedades do CSS um por um. Vamos dar uma olhada neste método.

O código acima pratica a animação em um div elemento e é explicado abaixo

• o preenchimento, altura, largura e largura de fronteira com vários valores de velocidade
• Em primeiro lugar, o preenchimento será animado seguido por altura, largura e largura de fronteira

Saída

Antes de animar

Depois de animar

Exemplo 3: Valores relativos

Os valores relativos são gerados usando duas operadoras de atribuição "+=" e "-=". O valor atual da propriedade CSS é tomado como valores de referência e novos valores são gerados adicionando/subtraindo algum valor numérico desse valor atual.

No código acima,

• A largura e a altura da div são animadas
• Em cada clique (no nosso caso), a largura aumentará em 10px enquanto a altura será reduzida por 5px.

Saída

Antes da animação,

Após vários cliques,

Exemplo 4: Usando valores de string

O método Animate () aceita apenas três valores de string (esconder, mostrar ou alternar) para propriedades CSS. A propriedade Toggle pode animar a propriedade oculta para mostrar e vice -versa.

No código acima, o mostre e alterne Operações são realizadas em largura e altura respectivamente. Para isso, usamos o botão Class = ”alternar”E class =”mostrar” .

Saída

Antes da animação,

Depois de clicar no botão de alternância, a largura mudará seu estado (para oculto como está no “mostrar”Estado) como pode ser visto na imagem a seguir.

Se você clicar no botão Mostrar, ele exibiria a div novamente.

As animações têm um papel fundamental para seguir qualquer conteúdo. Seguindo esses exemplos, você teria aprendido a criação personalizada de animações em Jquerry.

Conclusão

O método Animate () é usado para criar animações personalizadas no jQuery. O método Animate () pode ser aplicado para animar várias propriedades CSS de uma só vez ou pode ser aplicado de maneira seqüencial também. Este artigo fornece um guia detalhado sobre a criação de animações personalizadas no jQuery. Você entenderia o método Animate () (parte interessada em animações). Além disso, vários exemplos são demonstrados que mostram a criação de animações personalizadas em jQuery.