Implementando animações com jQuery

Os efeitos animados em jQuery Não são as animações que conhecemos, ou seja, não vamos dar movimento a um desenho, é importante esclarecer porque pode causar confusão. Esses efeitos animados referem-se à maneira como as transições dos elementos são geradas dentro do SOL, um elemento que pode se mover lentamente de um canto do navegador ou desaparecer quebrando-se em milhares de pedaços.
À primeira vista pode parecer que eles são úteis para nós, no final se queremos que um elemento apareça ou desapareça pode não nos importar como isso acontece, porém para aqueles que estudam o comportamento do interfaces de usuário Isso é muito importante, pois pode definir o humor do usuário ou ser exibido como uma forma sutil de tornar o visual um pouco mais atraente.
Claro que há quem abuse e exagere no uso de efeitos animados e sobrecarrega tanto a interface que ela fica pesada ou pouco confiável e faz o usuário sofrer ao usar o sistema, por isso é preciso ter um mínimo de consciência e moderação ao aplicar esses tipos de efeitos.
É importante saber que os diferentes tipos de animações Eles têm uma série de opções controláveis ​​a partir da chamada que fazemos, podemos controlar sua duração, para que possamos calibrar se o efeito afeta a usabilidade ou não e se dependendo do tempo que dura pode ser detalhado e atingir o efeito desejado e nós também pode indicar a função ou método a ser executado no ligue de volta no final da animação, por exemplo, se fizermos com que um botão desapareça quando ele não estiver mais lá, é executado um método que envia uma mensagem ao usuário.
Outra opção que temos é passar um mapa de objetos no qual definimos as opções avançadas ou exclusivas do efeito animado que estamos usando, porém isto é principalmente quando queremos fazer algo muito específico e avançado. A sintaxe para usar essas opções é a seguinte:

 $ (seletor). efeito (duração); $ (seletor) .effect (duração, função CallBack); $ (seletor) .effect (functionCallBack); $ (seletor) .effect (mapObjects); 

Como vemos que cada linha corresponde a cada uma das variações possíveis que podemos aplicar nas animações padrão, é possível que alguma animação tenha uma característica particular, porém nas que veremos neste tutorial trabalharemos com isso.
Um dos efeitos mais usados ​​e mais úteis que podemos pensar é mostrar e ocultar elementos e também descobrimos que são efeitos bastante simples de implementar, por isso vamos usá-los como exemplo.
mostrar () e ocultar ()Os métodos que nos permitem atingir esses objetivos são Mostrar() Y ocultar (), como vemos seus nomes em inglês correspondem à ação, mostrar para o primeiro e ocultar para o segundo, eles podem ser aplicados a qualquer elemento dentro de nosso SOL, por isso são bastante práticos e úteis.
Vamos fazer uma pequena animação na qual vamos usar a duração e a chamada a uma função ligue de volta na hora de executá-lo, vamos aplicar os efeitos Mostrar() Y ocultar () e assim podemos aprender como eles são usados.
No código a seguir, vemos como, em primeiro lugar, o que fazemos é incluir a biblioteca jQuery de um dos CDN adequado, com isso evitamos ter que armazená-lo localmente e assim aproveitaremos o cache do navegador.
Em seguida, definimos dois blocos nomeado item 1 Y element2 respectivamente, onde o primeiro está oculto e o segundo visível e finalmente temos um botão que diz start ao qual aplicamos em seu evento click que executa a função encorajar ().
A função encorajar () primeiro aplique a animação Mostrar() ao item 1 e dá a ele um valor de 1000 milissegundos que é igual a 1 segundo e a isso adicionamos um ligue de volta onde aplicamos o efeito ocultar () a nós element2 e gera uma mensagem por console.
Dentro da animação ocultar () a que nos aplicamos element2 nós criamos um ligue de volta onde também escreveremos uma mensagem pelo console. Então, vamos examinar o código do nosso primeiro exemplo:

 Animações
Este é o nosso elemento oculto inicial

Para rodar a animação, clique no botão
Começar 

Vamos ver agora como fica em nosso navegador, na próxima imagem veremos o HTML Antes de executar qualquer ação, vamos ver como o item 1 não mostrado:

Agora na imagem a seguir veremos o que acontece após clicar no botão Começar, notaremos que agora vemos o elemento oculto e no console teremos duas mensagens, se eles fizerem o exemplo ao vivo também verão como um elemento aparece primeiro e um segundo depois o outro desaparece:

De uma forma simples, demos vida a mostrar e ocultar os elementos do nosso documento HTML.
Há momentos em que queremos que um botão funcione como um switch, mostrando e ocultando um elemento ou um grupo de elementos, embora isso seja fácil de fazer avaliando os estados e usando os métodos Mostrar() Y ocultar (), a verdade é que geraríamos muito código para algo tão simples, por isso a equipe de jQuery eles pensaram sobre isso e nos fornecem o método alternancia ().
O que o método toggle () faz?O que esse método faz é avaliar o estado atual do elemento e, portanto, se estiver visível, ele o oculta e se estiver oculto, ele o mostrará, conforme indicado pelo comportamento do tipo switch. O melhor é que a este método podemos adicionar as diferentes opções de animação, com a duração e a possibilidade de fazer o ligue de volta.
Vamos agora construir um exemplo onde colocamos em prática o que aprendemos sobre o método toggle (), vamos ver o código abaixo:

 Animações
O resultado da execução do efeito toggle ().

Começar 

No código a seguir, veremos como criamos um div chamado item 1 que está inicialmente oculto, então temos um botão Começar que ao clicar irá chamar a função animate, ela terá o método alternancia () aplicado ao elemento e, na primeira instância, ele aparecerá e exibirá uma mensagem por console.
Vamos ver o estado inicial deste código por navegador, notaremos que temos apenas o botão e não há nada no console:

Agora vamos ver como, ao clicar no botão, o elemento oculto aparece e reflete a mensagem para nós por meio do console:

Por fim, se clicarmos no botão novamente, o elemento ficará oculto e a mensagem se repetirá no console, o que notamos ao ver o número três próximo a ele, que indica quantas vezes o evento foi acionado.

Sim, bem Mostrar() Y ocultar () São eficazes, podem parecer um pouco simples à primeira vista, por isso temos outros métodos que nos ajudam a fazer diferentes animações, neste caso estamos a falar desaparecer Y slide que correspondem a desbotamento e deslizamento, onde o primeiro tem o efeito de aparecer e o segundo desliza de uma borda da tela ou do recipiente do elemento.
Vamos ver na lista a seguir seus equivalentes a Mostrar() e para ocultar ():
fadeIn () e slideIn ()Eles correspondem aos efeitos para mostrar os elementos, ou seja, eles são equivalentes aos Mostrar().
fadeOut e slideOut ()Eles correspondem aos efeitos de ocultar elementos, ou seja, são equivalentes ao ocultar ().
fadeToggle () e slideToggle ()Há um terceiro caso e é o que corresponde aos efeitos do tipo switch e são equivalentes a alternancia ().
Como exercício, permitimos que você percorra os exemplos novamente, mas usando esses novos métodos para que possa ver em primeira mão como eles funcionam.
Com isso terminamos este tutorial, aprendemos a animar nossos elementos de forma sutil e inteligente, é importante não abusar desses efeitos no sentido de colocar tempos de animação muito longos, pois o que vamos conseguir é irritar o usuário e atrasar seu trabalho, lembrando que devemos manter a usabilidade acima de tudo.