Com jQuery você pode desaparecer elementos dentro e fora da visibilidade.
Clique para fade in / out painel
Porque o tempo é valioso, nós entregamos o aprendizado rápido e fácil.
No w3ii , você pode estudar tudo que você precisa para aprender, em um formato acessível e prático.
Exemplos
jQuery fadeIn()
Demonstra o jQuery fadeIn() método.
jQuery fadeOut()
Demonstra o jQuery fadeOut() método.
jQuery fadeToggle()
Demonstra o jQuery fadeToggle() método.
jQuery fadeTo()
Demonstra o jQuery fadeTo() método.
Métodos de desvanecimento jQuery
Com jQuery você pode desaparecer um elemento dentro e fora de visibilidade.
jQuery tem os seguintes métodos de fade:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeIn() Método
O jQuery fadeIn() método é usado para desaparecer em um elemento oculto.
Sintaxe:
$(selector).fadeIn(speed,callback);O parâmetro de velocidade opcional especifica a duração do efeito. Ele pode ter os seguintes valores: "slow", "fast" , ou milissegundos.
O parâmetro callback opcional é uma função a ser executada após o desvanecimento concluída.
O exemplo seguinte demonstra a fadeIn() método com parâmetros diferentes:
Exemplo
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
}); Tente você mesmo " jQuery fadeOut() Método
O jQuery fadeOut() método é usado para fazer desaparecer um elemento visível.
Sintaxe:
$(selector).fadeOut(speed,callback);O parâmetro de velocidade opcional especifica a duração do efeito. Ele pode ter os seguintes valores: "slow", "fast" , ou milissegundos.
O parâmetro callback opcional é uma função a ser executada após o desvanecimento concluída.
O exemplo seguinte demonstra a fadeOut() método com parâmetros diferentes:
Exemplo
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
}); Tente você mesmo " jQuery fadeToggle() Método
O jQuery fadeToggle() método alterna entre o fadeIn() e fadeOut() métodos.
Se os elementos vão desaparecendo gradualmente, fadeToggle() irá desaparecer-los.
Se os elementos estão desbotadas em, fadeToggle() irá desaparecer-los.
Sintaxe:
$(selector).fadeToggle(speed,callback);O parâmetro de velocidade opcional especifica a duração do efeito. Ele pode ter os seguintes valores: "slow", "fast" , ou milissegundos.
O parâmetro callback opcional é uma função a ser executada após o desvanecimento concluída.
O exemplo seguinte demonstra a fadeToggle() método com parâmetros diferentes:
Exemplo
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
}); Tente você mesmo " jQuery fadeTo() Método
O jQuery fadeTo() método permite desvanecimento para uma determinada opacidade (valor entre 0 e 1).
Sintaxe:
$(selector).fadeTo(speed,opacity,callback);O parâmetro da velocidade necessária especifica a duração do efeito. Ele pode ter os seguintes valores: "slow", "fast" , ou milissegundos.
O parâmetro de opacidade requerido no fadeTo() método especifica desvanecimento para uma determinada opacidade (valor entre 0 e 1).
O parâmetro callback opcional é uma função a ser executada depois que a função seja concluída.
O exemplo seguinte demonstra a fadeTo() método com parâmetros diferentes:
Exemplo
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
}); Tente você mesmo " Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »
jQuery Efeitos Referência
Para uma visão completa de todos os efeitos jQuery, por favor, vá ao nosso jQuery Efeito de referência .