Efeitos de animação

Animate

Efeito para fazer animações customizadas

animate(parâmetro,velocidade,easing,resposta);

Exemplo

$("alvo").animate({height: 'toggle', opacity: 'toggle'},"slow"); clique aqui - animacao 01

Aqui está um exemplo do efeito animate usando toggle

Fade in / Fade out

Ajusta a propriedade opacity para fazer um efeito de fadeIn

fadeIn(velocidade, resposta);
fadeOut(velocidade, resposta);

Exemplo

$("alvo").fadeIn("slow");
$("alvo").fadeOut("slow");
clique aqui - animacao 2
Aqui está um exemplo do fadeIn

Efeito de Slide

Ajusta a propriedade height para fazer com que os elementos se escondam ou se mostrem de uma forma deslizante

slideDown(velocidade, resposta);
slideUp(velocidade, resposta);
slideToggle(velocidade, resposta);

Exemplo

$("alvo").slideDown("slow");
$("alvo").slideToggle("slow");
clique aqui para animacao 3
Aqui está um exemplo do slide down
clique aqui para animacao 4
Aqui está um exemplo do slide Toggle

Efeito com callback

Todos os efeitos possuem uma funcao de resposta, ou seja, um callback, o exemplo abaixo ilustra para hide e show, mas pode ser usado para outros efeitos

				
function resposta() {
				
	$(".alvo:eq(4)").fadeIn("slow",resposta2);
}
			
function resposta2() {
				
	$(".alvo:eq(4)").fadeOut("slow",resposta);
}
			
			
$(".exemplo:eq(4)").click(function(){
				
	resposta();
	return false;				
				
});
			
$(".parar").click(function(){
				
	$(".alvo:eq(4)").stopAll();
	return false;
});
								

Exemplo

clique aqui para animacao 5
clique aqui para parar
Aqui está um exemplo do show e hide utilizando o callback