Método fadeToggle

O método fadeToggle alterna suavemente entre exibir ou ocultar elementos, animando sua opacidade.

Sintaxe

Exibição/ocultação em um tempo definido, 400ms por padrão:

.fadeToggle(duração);

O tempo pode ser definido 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:

.fadeToggle('slow' ou 'fast');

Se nenhum parâmetro for especificado - não haverá animação, os elementos serão exibidos/ocultados instantaneamente:

.fadeToggle();

Também é possível passar uma função de easing como segundo parâmetro, e uma função de callback como terceiro - executada após a conclusão da animação. Ambos os parâmetros são opcionais:

.fadeToggle(duração, [função de easing], [função de callback]);

É possível passar várias opções para o método, na forma de um objeto JavaScript, contendo pares chave: valor:

.fadeToggle(opções);

Tal objeto pode passar os seguintes parâmetros e funções - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. A descrição desses parâmetros pode ser consultada para o método animate. Por exemplo, vamos definir a duração e a função de easing:

.fadeToggle( {duration: 800, easing: easeInSine} );

Exemplo

No exemplo a seguir, no primeiro clique no botão #toggle o elemento com #test será ocultado, e no próximo - será exibido. Para isso usamos o método fadeToggle. Também definiremos a velocidade para 1000ms e o valor da função de easing para linear:

<button id="toggle">toggle</button>
<div id="test"></div>

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

$('#toggle').on('click', function() {
	$('#test').fadeToggle(1000, 'linear');
});

Veja também

método slideToggle,
que alterna a exibição/ocultação suave de elementos
método fadeTo,
que altera a opacidade dos elementos
método toggle,
que alterna a exibição/ocultação suave de elementos
método animate,
que anima propriedades dos elementos