O jQuery inclui vários efeitos prontos a usar que permitem mostrar, esconder e animar elementos de forma simples. Estes efeitos não substituem o CSS avançado, mas são ideais para criar interações rápidas, feedback visual e pequenas animações sem grande complexidade.

Efeitos de visibilidade

Os métodos show() e hide() permitem mostrar ou esconder elementos com um efeito simples.

Também é possível definir a duração do efeito (em milissegundos):

Alternar visibilidade com toggle()

O método toggle() alterna automaticamente entre mostrar e esconder.

Este método é muito utilizado em menus, painéis de ajuda e jogos interativos.

Efeitos de fade

Os efeitos de fade trabalham com a opacidade dos elementos.

Com duração definida:

Também existe o método fadeToggle():

Efeitos de slide

Os efeitos de slide simulam o movimento vertical dos elementos.

Alternar automaticamente:

São muito utilizados em secções que aparecem e desaparecem de forma suave.

Animações personalizadas com animate()

O método animate() permite criar animações mais personalizadas.

Este método é útil para criar efeitos visuais mais elaborados, mas deve ser usado com moderação.

Exemplo completo

HTML:

jQuery:

Exercício 1 — Efeitos de transição

Cria uma página com:

• Um botão

• Um bloco de conteúdo

Quando o botão for clicado:

• O bloco deve aparecer e desaparecer usando um efeito fade

Exercício 2 — Feedback visual

Cria dois botões:

• Acertou

• Errou

Quando:

• Clicar em Acertou, mostrar uma mensagem com fadeIn

• Clicar em Errou, esconder a mensagem com fadeOut