Método fadeTo

O método fadeTo altera suavemente a opacidade de um elemento para um valor especificado, em um intervalo de 0 a 1.

Sintaxe

A duração e a opacidade são especificadas em qualquer variante de uso do método. Alteração da opacidade em um tempo determinado, 400ms por padrão:

javascript.fadeTo(duração, valor da opacidade);

O tempo pode ser especificado não apenas em milissegundos, mas também com as palavras-chave slow (600ms) e fast (200ms), quanto maior o valor, mais lenta a animação:

javascript.fadeTo('slow' ou 'fast', valor da opacidade);

Um callback também pode ser passado como um terceiro parâmetro (opcional) - será executado após a conclusão da animação:

javascript.fadeTo(duração, valor da opacidade, [função de callback]);

A função de easing e a função de callback (parâmetros opcionais) também podem ser passadas - será executada após a conclusão da animação:

javascript.fadeTo(duração, valor da opacidade, [função de easing], [função de callback]);

Exemplo

No exemplo a seguir, usando o método fadeTo ao clicar no botão #hide o elemento com #test será ocultado diminuindo a opacidade para 0.5, e em #show - será mostrado:

html<button id="hide">hide</button>
<button id="show">show</button>
<div id="test"></div>

css#test {
  width: 200px;
  height: 200px;
  background: green;
  color: white;
  margin-top: 10px;
}

javascript$('#show').on('click', function() {
  $('#test').fadeTo(1000, 1);
});

$('#hide').on('click', function() {
  $('#test').fadeTo(1000, 0.5);
});

Veja também