Método slideToggle

O método slideToggle exibe suavemente elementos ocultos e oculta elementos exibidos.

Sintaxe

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

javascript.slideToggle(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.slideToggle('slow' ou 'fast');

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

javascript.slideToggle();

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.slideToggle(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.slideToggle(opções);

Tal objeto pode conter 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.slideToggle( {duration: 600, easing: easeInSine} );

Exemplo

Vamos, após clicar no botão, ocultar suavemente o div pai que contém os parágrafos, usando o método slideToggle (este div será encontrado usando o método parent), após clicar novamente no botão, o div será exibido suavemente novamente e assim por diante. Passando a palavra-chave slow, definiremos a velocidade para 600ms:

html<button>toggle text</button>
<div>
  <p id='test'>text text text text text text text</p>
  <p>text text text text text text text</p>
  <p>text text text text text text text</p>
</div>

javascript$('button').click(function() {
  $('#test').parent().slideToggle('slow');
});

Veja também