JQuery - o método animate

Um evento muito simples que utiliza
De acordo com a documentação do Jquery a sintaxe é a seguinte:

.animate( properties [, duration] [, easing] [, complete] )

properties: as propriedades css que serão executadas.
duration : duração da animação em millissegundos podendo usar 'fast' para 200ms e 'slow' para 600ms.
easing:
complete: callback, evento a ser chamado após o fim da animação.

Exemplo Básico

Digamos que precisamos criar um evento onde ao passar o mouse sobre um label, ele aumentará de tamanho e quando passar o mouse fora ele voltará ao tamanho original.

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Exemplo Animate - Jquery</title>
</head>
<body>
  <label id="labelAnimado">Anime-se!</label>
</body>
</html>

No html criamos apenas um label e atribuimos o id "labelAnimado", que é onde usaremos para adicionar os eventos no javascript.

JAVASCRIPT

$(document).ready(function(){
  
  $("#labelAnimado").on("mouseover",function(){
  
    $(this).animate({
      fontSize: '+=7px'
    });
    
  }).on("mouseleave",function(){
  
    $(this).animate({
      fontSize: '-=7px'
    });
  
});
});

Explicação:

Linha 1: Quando a página estiver com o carregamento completo, execute isto.
Linha 3: Atribui o evento "mouseover" no label
Linha 5: Define o animate no elemento. (o this nesse caso é a mesma coisa de #labelAnimado)
Linha 6: Aumento a fonte do label em 7px;
Linha 9: Atribui o evento "mouseleave" (Ao mouse rolar sobre e sair do elemento)
Linha 12: Digo que ele diminua 7px's ao evento ser executado.

O resultado vocês podem conferir no link abaixo:
Exemplo Animate - Jquery

Source Lovers