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.

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.

 

Clique aqui para testar

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

/* script.. */$("#divTest").fadeIn();

/* efeito será executado lentamente */$("#pTest").fadeIn("slow");

/* em Milissegundo */$("#labelTest").fadeIn(2000);

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

Fadeout

/* script.. */$("#divTest1").fadeIn();

/* efeito será executado rapidamente */$("#pTest2").fadeIn("fast");

/* em Milissegundo */$("#labelTest3").fadeIn(2000);

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.

$("button").click(function(){
   /* internamente o fadeToggle intercala o fadeIn e fadeOut */   $("#elemento").fadeToggle();
});

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 “” os efeitos não irão funcionar.