Animações em Javascript com JQuery

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

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Animações em Javascript com JQuery - by tmferreiratitle>
        <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>