Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Animação com jQuery

2,197 views

Published on

Apresentação sobre os comandos básicos de animação.

  • Be the first to comment

Animação com jQuery

  1. 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
  2. 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);
  3. 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' ); });
  4. 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' ); }
  5. 6. $().stop(clearQueue, jumpToEnd) function funcaoStop(){ $( "#containerBlue" ).stop(); } function funcaoStopMatandoRestoDaAnimacao(){ $( "#containerBlue" ).stop( true , true ); }
  6. 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); }
  7. 8. Obrigado!

×