[Plugin jQuery] Animate To Class

[dragun 0]

Opa galera, criei um plugin que permite você animar diretamente para uma classe.

Facilitando animações em jQuery e limpando o código fonte.

 

Documentação do plugin

 

uma explicação simples de como ele funciona:

 

hoje, quando vamos fazer uma animação usando o animate, o código fica assim.

 

$("#foo").animate({  
   "margin-left" : "40px",  
   "width" : "300px",  
   "heigth" : "150px"  
}, 1000);

Não é dificil perceber que caso exista uma sequência de movimentos, esse código ficará muito extenso.

 

$("#foo").animate({  
   "margin-left" : "40px",  
   "width" : "300px",  
   "heigth" : "150px"  
}, 1000).animate({  
   "margin-left" : "100px",  
   "width" : "500px",  
   "heigth" : "50px"  
}, 1000).animate({  
   "margin-left" : "40px",  
   "width" : "370px",  
   "heigth" : "500px"  
}, 1000).animate({  
   "margin-left" : "0px",  
   "width" : "10px",  
   "heigth" : "10px"  
}, 1000);

utilizando o animate to class, você apenas precisa criar as classes com os parametros que serão passados, diretamente na sua folha de estilo.

 

.class1{ 
   margin-left : 40px; 
   width: 300px;  
   heigth : 150px;
}
.class2{ 
   margin-left : 100px; 
   width : 500px;  
   heigth : "50px;
}
.class3{ 
   margin-left : 40px; 
   width : 370px; 
   heigth : 500px;
}
.class4{
   margin-left :0px;
   width:10px;
   heigth:10px;
}

Pronto, agora com todo efeito que a animação terá separado, o código javaScript fica bem compacto, e simples de ler.

 

$("#foo").animateToClass(".class1",1000).animateToClass(".class2",1000).animateToClass(".class3",1000).animateToClass(".class4",1000);

e ai, gostaram?

[brcontainer 16]

Exemplo ONLINE:

http://igorvieira.com/projects/animate-to-class/

 

Eu gostei bastante, muito boa animação ;)

[dragun 0]

To preparando a versão 0.2

Nela terá o suporte para Folhas de Estilos importadas com @import

 

:D

[dragun 0]

To preparando a versão 0.2

Nela terá o suporte para Folhas de Estilos importadas com @import

 

:D

Opa,

Lançada a versão 0.2 : http://igorvieira.com/blog/jquery/animate-to-class-v02/

E também uma nova página de demonstração: http://igorvieira.com/projects/animate-to-class/v0.2/

[Ted k' 126]

bom mesmo, eu gostei desse tbm!!

[dragun 0]

bom mesmo, eu gostei desse tbm!!

Opa obrigado!

Se alguém que usar tiver alguma sugestão de melhoria, pode enviar aqui ou mesmo no blog, pois o mais importante é deixar o plugin útil e usável.

Se alguém quiser solicitar um plugin, vou verificar a possibilidade de faze-lo também. :D