Efeitos jQuery - Desvanecimento
Com jQuery você pode fazer fade de elementos dentro e fora de visibilidade.
Clique para fade in/out no painel
Como o tempo é valioso, oferecemos aprendizado rápido e fácil.
Na W3Schools, você pode estudar tudo o que precisa aprender, em um formato acessível e prático.
Exemplos
Demonstra o método jQuery fadeIn().
Demonstra o método jQuery fadeOut().
Demonstra o método jQuery fadeToggle().
Demonstra o método jQuery fadeTo().
Métodos de desvanecimento do jQuery
Com jQuery você pode fazer um elemento entrar e sair da visibilidade.
jQuery tem os seguintes métodos de fade:
fadeIn()fadeOut()fadeToggle()fadeTo()
Método jQuery fadeIn()
O método jQuery fadeIn()é usado para fade em um elemento oculto.
Sintaxe:
$(selector).fadeIn(speed,callback);
O parâmetro opcional de velocidade especifica a duração do efeito. Pode assumir os seguintes valores: "lento", "rápido" ou milissegundos.
O parâmetro de retorno de chamada opcional é uma função a ser executada após a conclusão do desvanecimento.
O exemplo a seguir demonstra o fadeIn()método com diferentes parâmetros:
Exemplo
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
Método jQuery fadeOut()
O método jQuery fadeOut()é usado para desvanecer um elemento visível.
Sintaxe:
$(selector).fadeOut(speed,callback);
O parâmetro opcional de velocidade especifica a duração do efeito. Pode assumir os seguintes valores: "lento", "rápido" ou milissegundos.
O parâmetro de retorno de chamada opcional é uma função a ser executada após a conclusão do desvanecimento.
O exemplo a seguir demonstra o fadeOut()método com diferentes parâmetros:
Exemplo
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
Método jQuery fadeToggle()
O método jQuery fadeToggle()alterna entre os
métodos fadeIn()e .fadeOut()
Se os elementos estiverem esmaecidos, fadeToggle()eles aparecerão.
Se os elementos estiverem desbotados, fadeToggle()eles desaparecerão.
Sintaxe:
$(selector).fadeToggle(speed,callback);
O parâmetro opcional de velocidade especifica a duração do efeito. Pode assumir os seguintes valores: "lento", "rápido" ou milissegundos.
O parâmetro de retorno de chamada opcional é uma função a ser executada após a conclusão do desvanecimento.
O exemplo a seguir demonstra o fadeToggle()método com diferentes parâmetros:
Exemplo
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
Método jQuery fadeTo()
O método jQuery fadeTo()permite o desvanecimento para uma determinada opacidade (valor entre 0 e 1).
Sintaxe:
$(selector).fadeTo(speed,opacity,callback);
O parâmetro de velocidade necessário especifica a duração do efeito. Pode assumir os seguintes valores: "lento", "rápido" ou milissegundos.
O parâmetro de opacidade necessário no fadeTo()método especifica o desvanecimento para uma determinada opacidade (valor entre 0 e 1).
O parâmetro de retorno de chamada opcional é uma função a ser executada após a conclusão da função.
O exemplo a seguir demonstra o fadeTo()método com diferentes parâmetros:
Exemplo
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
Exercícios de jQuery
Referência de efeitos jQuery
Para uma visão geral completa de todos os efeitos do jQuery, acesse nossa Referência de Efeitos do jQuery .