O que você acha de fazer animações simples com Javascript? Interessante? Então vem comigo!
Com freqüência eu venho mostrando as inúmeras vantagens de se usar o JQuery. Hoje eu vou mostrar uma forte vantagem: criar pequenas animações!
Para fazer isso, utilizaremos o método animate do JQuery.
Método Animate
Documentação do método Animate
A sintaxe básica do método é:
animate(params, speed, easing, callback)Vamos aos parâmetros:
- params: Conjunto de atributos de estilo que você deseja animar. Ex.: {left: 100, top: 200} Isso vai levar o elemento do local onde ele está até 100 pixels laterais e 200 pixels do topo do elemento de onde ele está contido ou da tela.
- speed: (opcional) Uma das três strings (“slow”, “normal”, or “fast”) or um número em milisegundos (1000 milisegundos = 1 segundo).
- easing: (opcional) O nome do efeito que será usado (Plugin de efeito requirido).
- callback: (opcional) Uma função para ser executada após o fim da animação. É executada uma vez para cada elemento que chamou a função.
Nada melhor que aprender com exemplos
Para todos os exemplos utilizaremos o seguinte HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Animações em Javascript com JQuery - by tmferreira</title>
<meta name="author" content="tmferreira - Thiago Martins Ferreira" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="pt-br" />
<meta name="copyright" content="© tmferreira" />
<link rel="shortcut icon" type="image/ico" href="http://www.tmferreira.com.br/blog/wp-content/themes/greenmarinee/favicon.ico" />
<link href="estilo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="animacao.js"></script>
</head>
<body>
<div id="animado">
<h3>Este é uma DIV animada!!</h3>
</div>
</body>
</html>E o seguinte CSS
body {
background: #eee;
}
#animado {
background: #008;
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #00f;
}
#animado h3 {
font-family: Verdana;
}A partir de agora, só mostrarei o conteúdo do arquivo animacao.js
Exemplo 1: Movimento Lateral
$(document).ready(function() {
$("#animado").animate({left: 500}, "slow");
});Surpreso com a praticidade?
Exemplo 2: Movimento Diagonal
$(document).ready(function() {
$("#animado").animate({left: 500, top: 300}, 1500);
});Exemplo 3: Execução de Função após Animação
$(document).ready(function() {
$("#animado").animate({left: 500, top: 300}, 1500, function() {
alert("Blog do tmferreira!");
});
});Já está imaginando várias aplicações, né?
Exemplo 4: Dupla Animação
$(document).ready(function() {
$("#animado").animate({left: 300, top: 300}, 1500, function() {
$(this).animate({width: 500, height: 100}, 3000);
});
});Exemplo 5: Animação de Opacidade
$(document).ready(function() {
$("#animado").animate({opacity: 0.5}, 1500);
});Exemplo 6: Crescendo…
$(document).ready(function() {
$("#animado").animate({width: 500, height: 500}, 1500);
});Conclusão
Vou parando por aqui. Já deu para ver que as possibilidades são infinitas, né? Mas não pare por aqui. Faça seus próprios exemplos a fim de praticar.
Também não deixe de comentar para que eu possa sempre melhorar!
Abraços,
De 0 a 10, o quanto você recomendaria este artigo para um amigo?