Nesse tutorial aprenderemos como criar animações básicas utilizando Jquery. O nosso “desafio” inicial será mover uma imagem na tela quando o usuário clicar sobre ela.
O primeiro passo será criar uma página HTML comum, referenciando a biblioteca. Utilizarei a imagem abaixo com um estilo css.
Visão da página e código html abaixo:
O código da página é:
HTML
[code language=”html”]
Animações em Jquery
CSS
[code language=”css”]
body {
color: purple;
background-color: #d8da3d;
}
.animatedcat{
width: 213px;
height: 137px;
position:relative;
}
[/code]
SCRIPT
[code language=”javascript”]
$(function(){
$(‘#box’).click(function(){
$(this).animate({
“left” : “300px”
});
});
});
[/code]
Vamos agora entender o que esse código faz.
No trecho abaixo, como já sabemos, uma ação será tomada quando o elemento “box” for clicado. Como a ação acontecerá sobre esse mesmo elemento, ao invés de repetirmos seu nome, utilizamos o this seguindo de ponto+função – que nesse caso é animate.
A função animate irá animar o elemento a partir de atributos css que serão inseridos como no exemplo abaixo. No exemplo, o elemento deverá se posicionar há 300 px da esquerda, como foi definido por “left” : “300px”.
[code language=”javascript”] $(function(){$(‘#box’).click(function(){
$(this).animate({
“left” : “300px”
});
});
});
[/code]
Caso você deseje atribuir outros comandos, esteja à vontade. Para um caso do posicionamenteo do elemento à 300 px da esquerda e 250 px do topo, por exemplo, teríamos algo do tipo:
[code language=”javascript”] $(function(){$(‘#box’).click(function(){
$(this).animate({
“left” : “300px” ,
“top” : “250” ;
});
});
});
[/code]
Se você deseja definir um tempo para que aconteça a animação, também pode! Basta colocar, em ms, o tempo após o corpo da função, seguindo de “,” como no exemplo abaixo:
[code language=”javascript”] $(function(){$(‘#box’).click(function(){
$(this).animate({
“left” : “300px” ,
“top” : “250” ;
}, 5000);
});
});
[/code]
É importante ressaltar que mesmo que dois atributos estejam sendo modificados na animação, para o comando como está acima, “as duas coisas acontecerão ao mesmo tempo”, ou seja, o elemento será posicionado à esquerda e topo ao mesmo tempo. Caso você queria que, após ser posicionado à esquerda ele se posicione em relação ao topo, altere o script para:
[code language=”javascript”] $(function(){$(‘#box’).click(function(){
$(this).animate({
“left” : “300px”;
}, 5000);
$(this).animate({
“top” : “250” ;
}, 5000);
});
});
[/code]
Agora é a sua vez: dê asas à sua imaginação e descubra o que mais pode fazer com essa função!
