Animação com jQuery

download Animação com jQuery

If you can't read please download the document

Transcript of 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!