segunda-feira, 9 de agosto de 2010

Efeitos básicos com JQuery

Bom dia pessoal, andei meio sem tempo pra postar mas consegui uma brecha hoje e estou eu aqui.


Vou falar hoje sobre os efeitos em JQuery.



Existem vários efeitos facílimos de se aplicar vou listar alguns a seguir junto com sua demonstração de uso:

.show() -> Revela o seletor JQuery.

$('#div').show(1500); // 150 é a velocidade com que será revelado o elemento
 
.hide() -> Contrário do show ele esconde o elemento selecionado:
 
$("#div").hide(1500);
 
.toogle() -> Cria um efeito de alternância de visibilidade entre o elemento selecionado. Quando escondido revela e quando revelado esconde:
 
$("#div").toogle();
 
.slideDown() -> Revela suavemente o elemento escondido por meio do aumento gradativo da altura do seletor JQuery (de cima para baixo):


 $("#div").slideDown(1500);

.slideUp() -> Esconde o elemento suavemente de baixo pra cima.


 $("#div").slideUp(1500);

.slideToogle() -> Revesa entre o slideDown e o slideUp, revelando quem se encontra escondido e escondendo quem se encontra revelado.


 $("div").slideToogle(1500);

.fadeIn() -> Revela o elemento por meio de aumento gradativo de opacidade:


 $("#div").fadeIn(1500);

.fadeIn() -> Revela o elemento por meio de aumento gradativo de opacidade:

 $("#div").fadeIn(1500);

.fadeOut() -> Esconde o elemento selecionado por meio de diminuição de opacidade:

 $("div").fadeOut(1500);

.fadeTo() -> Alterna entre visível e invisível usando os efeitos de fadeIn() e fadeOut():

 $("#div").fadeTo(1500);

.animate() -> Permite criar animações personalizadas para o elemento selecionado:

 $("#div").animate(
 {opacity: "toogle", width:"hide"},
 {duration: "2000"}
 );

.stop() -> Permite que você interrompa a animação em andamento:

 $("#div").stop();

FONTE:
http://tiagobutzke.wordpress.com/2010/08/09/efeitos-basicos-com-jquery/

Nenhum comentário:

Postar um comentário