Efeitos do jQuery - Entrada e saída gradual

O jQuery fornece uma interface simples para executar vários efeitos impressionantes.

Os métodos de efeito do jQuery nos permitem aplicar rapidamente efeitos comuns com a menor configuração.

Métodos de efeito do jQuery

Com o jQuery, podemos implementar efeitos de entrada e saída gradual.

Possuímos os seguintes métodos de entrada e saída gradual do jQuery:

• fadeIn()

• fadeOut()

• fadeToggle()

• fadeTo()

A próxima seção mostrará como usar cada método de entrada e saída gradual.

jQuery fadeIn() e fadeOut()

jQuery fadeIn()O método gradualmente altera a opacidade do elemento selecionado de oculto para visível.

jQuery fadeOut()O método gradualmente altera a opacidade do elemento selecionado de visível para oculto.

O exemplo a seguir demonstra o uso dos métodos fadeIn() e fadeOut():

//　O efeito de saída gradual de um parágrafo visível
$("#fadeout-btn").click(function(){
　　$("p").fadeOut();
});
//　O efeito de entrada gradual de um parágrafo oculto
$("#fadein-btn").click(function(){
　　$("p").fadeIn();
});

Este éfadeIn()A sintaxe do método:

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

Este éfadeOut()A sintaxe do método:

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

IndependentementefadeIn()efadeOut()O método aceita três parâmetros opcionais:

• duration -Determina se o efeito de desvanecimento e aparecimento seráDuraçãoDuração. Valores possíveis: "slow", "fast" ou milissegundos

• easing -Indica a função de suavização a ser usada para a transição. Valores possíveis: "swing", "linear"

• callback-Especifica a função a ser chamada após a conclusão do método de desvanecimento.

Os seguintes exemplos demonstram o uso de fadeIn() e fadeOut() comdurationParâmetros:

$("#fadeout-btn").click(function(){
　　$("p").fadeOut(1500);
});
$("#fadein-btn").click(function(){
　　$("p").fadeIn(1500);
});

Os seguintes exemplos demonstram o uso de fadeIn() e fadeOut() comCallbackParâmetros:

$("#fadeout-btn").click(function(){
　　$("div").fadeOut(600, function(){
　　　　$("h3").text("Conclusão de saída.");
　　});
});
$("#fadein-btn").click(function(){
　　$("div").fadeIn(600, function(){
　　　　$("h3").text("Conclusão de entrada.");
　　});
});

Realizar animações em todos os spans (neste caso, palavras) para torná-las rapidamente opacas e200 milissegundos para concluir cada processamento de animação:

$("button").click(function(){
　　$("span:last-child").fadeOut("fast",　function(){
　　　　$(this).prev().fadeOut("fast",　arguments.callee);
　　});
});

O método jQuery fadeToggle()

Também podemos usarfadeToggle()O método alternará entre o efeito de entrada e saída do elemento HTML.

Se o elemento selecionado estiver saindo,fadeToggle()então o tornará visível.

Se o elemento selecionado estiver entrando,fadeToggle()diminuem a opacidade.

Os seguintes exemplos realizam<p>Alternar entre o efeito de entrada e saída do elemento:

$("button").click(function(){
　　$("p").fadeToggle();
});

Este éfadeToggle()A sintaxe do método:

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

OfadeToggle()O método aceita três parâmetros opcionais:

• duration -Determina se o efeito de desvanecimento e aparecimento seráDuraçãoDuração. Valores possíveis: "slow", "fast" ou milissegundos

• easing -Indica a função de suavização a ser usada para a transição. Valores possíveis: "swing", "linear"

• callback-Especifica a função a ser chamada após a conclusão do método de desvanecimento.

Método jQuery fadeTo()

jQuery fadeTo()O método gradualmente altera a opacidade do elemento selecionado para a opacidade especificada.

Atenção:OfadeTo()O método não altera a disposição da página (o elemento selecionado continuará a ocupar o mesmo espaço que antes).

Este exemplo gradualmente diminui<div>A opacidade do elemento:

$("button").click(function(){
　　$("div").fadeTo(500,　0.2);
});

Este éfadeTo()A sintaxe do método:

$(selector)fadeTo.(duration,　opacity,　easing,　callback)

Parâmetros:

• duration -Determina se o efeito de desvanecimento e aparecimento seráDuraçãoDuração. Valores possíveis: "slow", "fast" ou milissegundos

• opacidade-Opacidade a ser desvanecida. Deve estar entre 0.00 e1Número entre 0.00

• easing -Indica a função de suavização a ser usada para a transição (opcional). Valores possíveis: "swing", "linear"

• callback-Função a ser chamada após a conclusão da transição de efeito de desvanecimento e aparecimento (opcional)

O exemplo a seguir demonstra o uso do fadeTo() comCallbackParâmetros:

$("button").click(function(){
　　$("div").fadeTo(500, 0, function(){
　　　　alert("Redução de Opacidade!!!");
　　});
});

Referência de Efeitos do jQuery

Para referências completas de efeitos, visite nossoManual de Referência do jQuery Effects.