Entrar
Cadastre-se
Ajuda
Responder
Principalmente quando há um grande número de animações que serão feitas.
o plugin é bem simples de usar, de qualquer maneira, eu fiz uma documentação do plugin, se você não souber falar português, tem a versão em inglês também... rsrsrs
o download do plugin está na página da documentação, e lá você também encontra uma demonstração.
De qualquer maneira, vou fazer uma explicação simples de como ele funciona, e gostaria também de saber a opinião de vocês sobre ele, possíveis bugs, e sugestões de melhorias.
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?
Quote
VLW IGOR!!
