2. $().show (speed, function) $(). hide (speed, function) function show(){ $( "#containerBlue" ).show(1500, function (){ alert( 'função executada após fim da animação' )}); } function hide(){ $( "#containerBlue" ).hide( 4000, 'linear' ); } $().show (speed, easing , function) A partir da versão 1.4.3
3. $().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);
4. $().fadeOut(duration, easing , function) $().fadeIn(duration, easing , function) $().fadeTo(duration, opacity, easing , function) $().fadeToggle(duration, easing , function) A partir da versão 1.4.4 function fadeOut(){ $( "#containerBlue" ).fadeOut( 'slow' ); } function fadeIn(){ $( "#containerBlue" ).fadeIn( 'slow' ); } function fadeOutFadeIn(){ $( "#containerBlue" ).fadeOut( 'slow' , function (){ $( this ).fadeIn( 'slow' ); });
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 não tenha sido escondido pelo jquery Hide: define a propriedade display para none. Tempo pode ser em milisegundos (número) ou passado em string ( slow, normal e fast ) A função é chamada quando a animação estiver completa Easing : especifica a velocidade de progressão da animação.
Executa o show se o elemento estiver escondido e o hide se o elemento não estiver escondido.
Fadeout : muda gradualmente a opacidade do elemento para zero, remvendo-o da exibição. FadeIn: muda opacidade para 1 FadeTo: ajusta a opacidade dos elementos para o valor passado no parametro opacity FadeToggle:
SlideDown: faz com que o elemento que escondido seja msotrado, aumentando gradualmente seu tamanho vertical. SlideUp: SlideToggle:
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 animaçao na sequencia, ela é imediatamente chamada. Então se quisermos que as outras animacoes seguintes não 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.
- duration : duraçao do efeito - easing - complete: funcao chamada ao compl a anim - queue: fila A funcao animate permite que criemos efeitos de animacoes com as propriedades numericas do css. Podemos especificar valores absolutos e também valores relativos a um ponto de partida, pra isso usamos o +=, -= (direção positiva ou negativa ) Se tivermos várias animações aninhadas (funções de callback), o padrão é a execução delas em série, mas se quisermos que elas sejam executadas em paralelo, é só colocar o a opção queue = false.