jQuery Efeitos - Desvanecimento e Introdução

Através do jQuery, você pode implementar efeitos de desvanecimento e introdução de elementos.

Demonstração de Efeitos

Clique aqui para ocultar/mostrar painel

Um jarda de tempo é valioso como ouro, portanto, oferecemos conteúdo de aprendizado rápido e fácil.

Aqui, você pode obter qualquer conhecimento necessário de uma maneira fácil e conveniente.

Exemplo

jQuery fadeIn()
Demonstração do método jQuery fadeIn()
jQuery fadeOut()
Demonstração do método jQuery fadeOut()
jQuery fadeToggle()
Demonstração do método jQuery fadeToggle()
jQuery fadeTo()
Demonstração do método jQuery fadeTo()

Métodos de Desvanecimento do jQuery

Através do jQuery, você pode implementar efeitos de desvanecimento e introdução de elementos.

O jQuery possui os seguintes quatro métodos fade:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

Método jQuery fadeIn()

O jQuery fadeIn() é usado para introduzir elementos ocultos.

Sintaxe:

$(selector).fadeIn(,,callback);

Opcional , O parâmetro define a duração do efeito. Ele pode ter os seguintes valores: "slow", "fast" ou milissegundos.

Opcional callback O parâmetro é o nome da função a ser executada após a conclusão do efeito de desvanecimento.

A seguir, há um exemplo que demonstra o método fadeIn() com diferentes parâmetros:

Exemplo

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
);

Experimente você mesmo

Método jQuery fadeOut()

O método jQuery fadeOut() é usado para desvanecer elementos visíveis.

Sintaxe:

$(selector).fadeOut(,,callback);

Opcional , O parâmetro define a duração do efeito. Ele pode ter os seguintes valores: "slow", "fast" ou milissegundos.

Opcional callback O parâmetro é o nome da função a ser executada após a conclusão do efeito de desvanecimento.

Os exemplos a seguir demonstram o uso do método fadeOut() com diferentes parâmetros:

Exemplo

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
);

Experimente você mesmo

Método fadeToggle() do jQuery

O método fadeToggle() do jQuery pode alternar entre fadeIn() e fadeOut().

Se o elemento já estiver desvanecido, o fadeToggle() adicionará um efeito de desvanecimento ao elemento.

Se o elemento já estiver desvanecido, o fadeToggle() adicionará um efeito de desvanecimento ao elemento.

Sintaxe:

$(selector).fadeToggle(,,callback);

Opcional , O parâmetro define a duração do efeito. Ele pode ter os seguintes valores: "slow", "fast" ou milissegundos.

Opcional callback O parâmetro é o nome da função a ser executada após a conclusão do efeito de desvanecimento.

Os exemplos a seguir demonstram o uso do método fadeToggle() com diferentes parâmetros:

Exemplo

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
);

Experimente você mesmo

Método fadeTo() do jQuery

O método fadeTo() do jQuery permite alternar gradualmente para a opacidade fornecida (valor entre 0 e 1).

Sintaxe:

$(selector).fadeTo(,,opacity,callback);

O parâmetro obrigatório speed define a duração do efeito. Ele pode ter os seguintes valores: "slow", "fast" ou milissegundos.

O parâmetro obrigatório opacity no método fadeTo() define o efeito de desvanecimento para a opacidade fornecida (valor entre 0 e 1).

O parâmetro opcional callback é o nome da função a ser executada após a conclusão da função.

Os exemplos a seguir demonstram o uso do método fadeTo() com diferentes parâmetros:

Exemplo

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
);

Experimente você mesmo

Manual de Efeitos do jQuery

Para consultar os efeitos do jQuery em profundidade, acesse nossa Manual de Efeitos do jQuery。