Utilizando os efeitos de fadeIn, fadeOut e fadeToggle do jQuery

Como utilizar os efeitos de fadeIn, fadeOut e fadeToggle do jQuery no seu site / sistema web.

post ensinando a utilizar fadeIn, fadeOut e fadetoggle do jquery

Os efeitos de “fadeIn” e “fadeOut” são extremamente importantes se você deseja melhorar a experiencia visual do seu usuário.

Conhecendo o “fadeIn” e “fadeOut”.

O “fadeIn” é utilizado para tornar um elemento visível suavemente, já o “fadeOut” é o seu oposto, tornando o invisível.

Exemplo de fadeIn e fadeOut, clique no botão para testar o evento.

 

Código com as variações de utilização para o efeito “fadeIn”:

Como parâmetro você pode passar a duração que você deseja, em Milissegundo.

Fadeout

Da mesma forma que o fadein, o fadeOut também recebe como parâmetro a duração do efeito.

Utilizando o fadeToggle

O “fadeToggle” combina os dois efeitos, intercalando sua execução conforme o estado de visibilidade do elemento.

No exemplo acima que você pode testar, utilizei o “fadeToggle” no evento “click” do botão.

Observações fadeIn, fadeOut e fadetoggle

A função obviamente é dependente da biblioteca jquery, neste caso você só consegue executa-las após o carregamento do mesmo.

Se o elemento estiver com uma declaração “display:none” com a anotação “!important” os efeitos não irão funcionar.

 

Resumo
Efeitos de fadeIn, fadeOut e fadeToggle do jQuery
Nome do Artigo
Efeitos de fadeIn, fadeOut e fadeToggle do jQuery
Descrição
Tutorial com código fonte de exemplo ensinando a utilizar os efeitos de fadeIn, fadeOut e fadeToggle
Autor
Editor
Roger Mauricio Takemiya
Logo do Editor

Avalie este artigo!

Clique nas estrelas, para dar uma nota de 1 à 5.

1 estrela2 estrelas3 estrelas4 estrelas5 estrelas (Nenhuma avaliação ainda)
Loading...

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *