Animação com jQuery
- 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' ); });
- 5. $(). 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' ); }
- 6. $().stop(clearQueue, jumpToEnd) function funcaoStop(){ $( "#containerBlue" ).stop(); } function funcaoStopMatandoRestoDaAnimacao(){ $( "#containerBlue" ).stop( true , true ); }
- 7. $().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); }
- 8. Obrigado!
Editor's Notes
- #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 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.
- #4: Executa o show se o elemento estiver escondido e o hide se o elemento não estiver escondido.
- #5: 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:
- #6: SlideDown: faz com que o elemento que escondido seja msotrado, aumentando gradualmente seu tamanho vertical. SlideUp: SlideToggle:
- #7: 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.
- #8: - 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.