Download - Animação com jQuery
$().show (speed, function)
$().hide (speed, function)
function show(){$("#containerBlue").show(1500, function(){alert('funo executada aps fim da animao')});}
function hide(){$("#containerBlue").hide(4000, 'linear');}
$().show (speed, easing, function)
A partir da verso 1.4.3
Show: define o valor da propriedade display para o valor anterior se o elemento foi escondido pelo jquery. Define para display = block caso o elemento no tenha sido escondido pelo jquery
Hide: define a propriedade display para none.
Tempo pode ser em milisegundos (nmero) ou passado em string ( slow, normal e fast )
A funo chamada quando a animao estiver completa
Easing : especifica a velocidade de progresso da animao.
$().toggle(speed, easing, function)
function toggle(){$("#containerBlue").toggle('slow', function (){$('#botaoShowHide').attr('value',function(){$(this).val(($(this).val() == "show" ? "hide" : "show")); });});}
$(elemento).toggle(funcao que retorne true ou false);
Executa o show se o elemento estiver escondido e o hide se o elemento no estiver escondido.
$().fadeOut(duration, easing, function)
$().fadeIn(duration, easing, function)
$().fadeTo(duration, opacity, easing, function)
$().fadeToggle(duration, easing, function)
A partir da verso 1.4.4
function fadeOut(){$("#containerBlue").fadeOut('slow');}
function fadeIn(){$("#containerBlue").fadeIn('slow');}
function fadeOutFadeIn(){$("#containerBlue").fadeOut('slow', function(){$(this).fadeIn('slow');});
Fadeout : muda gradualmente a opacidade do elemento para zero, remvendo-o da exibio.
FadeIn: muda opacidade para 1
FadeTo: ajusta a opacidade dos elementos para o valor passado no parametro opacity
FadeToggle:
$().slideDown(duration, easing, function)
$().slideUp(duration, easing, function)
$().slideToggle(duration, easing, function)
function slideUp(){$("#containerBlue").slideUp('slow');}
function slideDown(){$("#containerBlue").slideDown('slow');}
function slideToggle(){ $("#containerBlue").slideToggle('slow');}
SlideDown: faz com que o elemento que escondido seja msotrado, aumentando gradualmente seu tamanho vertical.SlideUp:
SlideToggle:
$().stop(clearQueue, jumpToEnd)
function funcaoStop(){$("#containerBlue").stop();}
function funcaoStopMatandoRestoDaAnimacao(){ $("#containerBlue").stop(true, true);}
O stop() (chamado sem nenhum parametro) uma funcao que serve para parar uma animacao no ponto que ela estiver.
Parametro clearQueue: quando o stop chamado, se houver alguma outra animaao na sequencia, ela imediatamente chamada. Ento se quisermos que as outras animacoes seguintes no sejam acionadas, passamos esse parametro como true.
JumpToEnd: se true, faz com que a animacao v para o estado final.. num caso de fade ela para de esmaecer e pula direto pro estado final.
$().animate(properties, duration, easing, function)
$().animate(properties, options) - duration - easing - complete - queue
function drop(){$('#containerBlue').css('position','relative').animate({opacity: 0,top: $(window).height() - $('#containerBlue').height() - $('#containerBlue').position().top},2000, function(){ $('#containerBlue').hide(); }); }
function vaiParaEsquerda(){$('#containerBlue').animate({"left":"400px"},1000); }
- duration : duraao do efeito - easing - complete: funcao chamada ao compl a anim - queue: filaA funcao animate permite que criemos efeitos de animacoes com as propriedades numericas do css.
Podemos especificar valores absolutos e tambm valores relativos a um ponto de partida, pra isso usamos o +=, -= (direo positiva ou negativa )
Se tivermos vrias animaes aninhadas (funes de callback), o padro a execuo delas em srie, mas se quisermos que elas sejam executadas em paralelo, s colocar o a opo queue = false.
Obrigado!