Método slideUp

O método slideUp oculta elementos suavemente, recolhendo-os de baixo para cima. Os elementos podem ser mostrados usando o método slideDown.

Sintaxe

Ocultando em um tempo definido, 400ms por padrão:

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

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

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

.slideUp();

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

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

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

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

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

Exemplo

Vamos, após clicar no botão, ocultar suavemente o div pai que contém o input e o botão, usando o método slideUp (este div será encontrado usando o método parent). Passando a palavra-chave slow, definiremos a velocidade para 600ms. No div com #test exibiremos o texto 'Text is hidden':

<div>
	<button>hide text</button>
	<input type="text" value="aaa">
</div>
<div id="test"></div>

$('button').click(function() {
	$(this).parent().slideUp('slow', function() {
		$('#test').text('Text is hidden');
	});
});

Veja também

método slideDown,
que mostra elementos suavemente
método slideToggle,
que alterna a exibição/ocultação suave de elementos
método fadeOut,
que oculta elementos suavemente, tornando-os transparentes
método hide,
que oculta elementos suavemente