Saiba como criar efeitos e animações com jQuery

Olá pessoal, tudo bom?
Neste tutorial iremos falar sobre as propriedades de efeito do jQuery. Como adicionar efeitos de animação a sua página.
Espero que gostem.
Vamos lá!

Aula passada falamos sobre como trabalhar com os eventos de combinação mouse/teclado. Esses eventos irão nos ajudar a testar os efeitos que iremos aprender neste tutorial.

Nós podemos criar efeitos para esconder, mostrar, deslizar, aumentar e diminuir a opacidade dos elementos além de criar animações customizadas.

EFEITOS

Os efeitos mais conhecidos são:

Exemplo dos efeitos

.show()

Mostra o elemento selecionado. Este efeito trabalha com as propriedades do CSS display: block e display: none.

Quando o adicionamos ao elemento, ele substitui o display: none pelo display: block.

Saiba mais: http://api.jquery.com/show/

.hide()

Esconde o elemento selecionado. Este efeito trabalha da mesma forma que o .show(), só que ao invés de mostrar ele esconde os elementos.

Quando o adicionamos ao elemento, ele substitui o display: block pelo display: none.

Saiba mais: http://api.jquery.com/hide/

.fadeIn()

Apresenta o elemento selecionado gradualmente até ficar opaco. Este efeito trabalha com opacidade.

Saiba mais: http://api.jquery.com/fadeIn/

.fadeOut()

Esconde o elemento selecionado gradualmente até ficar transparente. Este efeito trabalha de forma contrária ao .fadeIn().

Saiba mais: http://api.jquery.com/fadeOut/

.slideDown()

Mostra o elemento selecionado com um efeito de deslizamento vertical.

Saiba mais: http://api.jquery.com/slideDown/

.slideUp()

Esconde o elemento selecionado com um efeito de deslizamento vertical. Esse efeito trabalha de forma contrária ao .slideDown().

Saiba mais: http://api.jquery.com/slideUp/

.slideToggle()

Esconde ou mostra o elemento selecionado com um efeito de deslizamento vertical. Esse efeito é a junção do slideDown com o slideUp. Ele descobre se o elemento está escondido e adiciona o efeito slideDown e caso o elemento esteja visível ele adiciona o slideUp para esconder.

Saiba mais: http://api.jquery.com/slideToggle/

ALTERANDO A DURAÇÃO DOS EFEITOS

Nós podemos também modificar o tempo de duração de cada efeito. Basta que adicionemos um valor numérico ou os valores (fast ou slow) à estrutura da função, como no exemplo abaixo:

REALIZAR ALGUMA AÇÃO APÓS A FINALIZAÇÃO DO EFEITO

Além de modificarmos o tempo em que o efeito irá acontecer, nós também podemos criar alguma ação após sua finalização. Para isso precisamos criar uma função, como apresentado exemplo abaixo:

TRABALHANDO COM ANIMAÇÃO

Com jQuery nós podemos animar propriedades CSS utilizando o método animate. Com ele podemos adicionar propriedades CSS aos elementos selecionados ou até mesmo modificar os valores já existentes.

Um bom exemplo desse método são os slides show (banners animados).

Para utilizarmos esse método é bem simples:

Analisando o código acima, podemos perceber que nós fizemos a chamada do método e logo após adicionamos as propriedades CSS do elemento que gostaríamos de editar. Veja o exemplo abaixo.

PROPRIEDADES CSS QUE PODEM SER TRABALHADAS COM O ANIMATE

A lista abaixo mostra todas as propriedades CSS que podemos trabalhar no método animate. Vocês irão perceber que algumas propriedades estão diferentes do padrão, mas a forma de aplicação é essa mesmo, por exemplo: margin-left = marginLeft.
Outro ponto importante é que não é possível alterar cores com esse método. Se você quiser alterar cores, é preciso utilizar o jQuery UI – Color Animation.

  • backgroundPositionX
  • backgroundPositionY
  • borderWidth
  • borderBottomWidth
  • borderLeftWidth
  • borderRightWidth
  • borderTopWidth
  • borderSpacing
  • margin
  • marginBottom
  • marginLeft
  • marginRight
  • marginTop
  • outlineWidth
  • padding
  • paddingBottom
  • paddingLeft
  • paddingRight
  • paddingTop
  • height
  • width
  • maxHeight
  • maxWidth
  • minHeight
  • minWidth
  • fontSize
  • bottom
  • left
  • right
  • top
  • letterSpacing
  • wordSpacing
  • lineHeight
  • textIndent

Esse assunto é bastante extenso, portanto será abordado em outros tutoriais de forma mais completa.

FINALIZANDO

Espero que vocês tenham gostado deste tutorial. Tentei exemplificar o melhor possível.

Caso ainda existam dúvidas, não deixem de comentar.

Muito obrigado e até a próxima.

TAGS: , , ,

AUTOR: Gabriel Costa
Gabriel Costa

Trabalho com desenvolvimento web a mais de 5 anos e atualmente desenvolvo projetos para órgãos do governo federal na área de interface digital, programação e design. Tenho parceria na empresa AidWeb - Desenvolvimento web e trabalho desenvolvendo websites e protótipos de sistemas acessíveis e responsíveis.

ARTIGOS RELACIONADOS

0

Deixe o seu comentário!

Autentificado como . Sair desta conta »

<pre lang="aqui vai o tipo de linguagem (js, html, css, php...)">
   Agora você posta seu código a vontade!
</pre> //aqui você fecha o código