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:

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

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

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

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

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

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

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

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

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

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

Veja também