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:

.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:

.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:

.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:

.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:

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

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

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

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

Veja também

método fadeToggle,
que alterna a opacidade dos elementos
método fadeIn,
que mostra suavemente elementos ocultos, tornando-os opacos
método animate,
que anima propriedades dos elementos