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