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:
.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:
.slideToggle('slow' ou 'fast');
Se nenhum parâmetro for especificado - não haverá animação, os elementos serão exibidos/ocultados instantaneamente:
.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:
.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:
.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:
.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:
<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>
$('button').click(function() {
$('#test').parent().slideToggle('slow');
});
