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”.

$(‘#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:

$(‘#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:

$(‘#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:

$(‘#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!

// Comente!

comentários