Veja o demo.

Sem muita conversa vamos ver como implementar três efeitos de animação em menus.

Animação 1

Essa é um efeito simples q movimenta o texto com a propriedade text-indent.

XHTML

<ul id="animation-1">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contato</a></li>
</ul>

CSS

#animation-1 li{
  width: 200px;
}
#animation-1 li a {
  display: block;
  padding:  10px 5px;
  width:190px;
  background-color: #ccc
}

jQuery

$(document).ready(function(){
  $("#animation-1 li a").hover(
    function(){
      $(this).animate({ textIndent: "30px" }, 500 );
    },function(){
      $(this).animate({ textIndent: "0px" }, 500 );
  });
});

Animação 2

Nesse exemplo vamos aumentar a largura do link selecionado e adicionar uma classe .off para para os demais links.

XHTML

<ul id="animation-2">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contato</a></li>
</ul>

CSS

#animation-2 li a {
  display: block;
  padding:  10px 5px;
  width: 200px;
  background-color: #ccc
}
#animation-2 .off a{
  background-color: #e1e1e1
}

jQuery

$(document).ready(function(){
  $("#animation-2 li a").hover(function(){
     $(this).parent().parent().find("li").addClass("off");
     $(this).parent().removeClass("off");
     $(this).animate({ width: "250px" }, 500 );
  },function(){
     $(this).parent().parent().find("li").removeClass("off");
     $(this).animate({ width: "200px" }, 500 );
  });
});

Animação 3

Esse efeito é muito utilizado em flash. Em nosso caso conseguimos um efeito bem semelhante com apenas um <span> animado.

XHTML

<ul id="animation-3">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contato</a></li>
</ul>

CSS

#animation-3 {
width: 200px
}
#animation-3 li{
  border: 1px solid #e1e1e1;
  height: 32px;
  overflow: hidden;
  position: relative;
}
#animation-3 li a{
  display: block;
  padding:  7px 5px;
  color: #6F6F6F
}
#animation-3 li span {
  display: block;
  height: 35px;
  width: 200px;
  background-color: #e1e1e1;
  position: absolute;
  top: 35px;
  left: 0;
  z-index: -1
}

jQuery

$(document).ready(function(){
  $("#animation-3 li").append("<span></span>");
  $("#animation-3 li a").hover(
    function(){
      $(this).next("span").animate({ top: "0px" }, 500 );
    },function(){
      $(this).next("span").animate({ top: "45px" }, 500 );
    });
});

Não esqueçam de adicionar os scripts abaixo do link para a biblioteca:

<script type="text/javascript" src="jquery.js"></script>

Obs.: foi testado no FireFox 3+, Internet Explorer 6+, Chrome, Opera e Safari.

Faça o download e ajuste às suas necessidades.

Demo da versão 1.0
Demo da versão 1.1

O que há de novo?

• 1. Opção de criar botão para restaurar o tamanho original.

  Essa opção foi solicitada por pessoas que estão utilizando o plugin. E para implementá-la é bastante simples, só precisamos declarar o novo parâmetro da seguinte maneira:

  opResetar: true

  Perceba no demo que foi acrescentado um novo link, entre o que aumenta e diminui, que tem a função de resetar a fonte para o seu tamanho inicial.

• 2. Inserir os links manualmente

  Antes só era possível inserir os links de controle pelo plugin, declarando o tipoPaiLink como ‘ul’ ou ‘p’. Agora o desenvolvedor tem a opção de inserir manualmente o seu código XHTML  para dar maior flexibilidade na customização. Observe o exemplo abaixo.

  XHTML

  <ul>
    <li>tamanho da fonte:</li>
    <li><a href="javascript:;" class="menos" title="Diminuir tamanho da letra">A-</a></li>
    <li><a href="javascript:;" class="resetar" title="Tamanho padr&atilde;o">A</a></li>
    <li><a href="javascript:;" class="mais" title="Aumentar tamanho da letra">A+</a></li>
  </ul>

  Perceba que é preciso manter o nome das classes que controlam o tamanho: menos, resetar e mais.

  Na chamada da função teremos que modificar algumas coisas: iremos deixar o parâmetro principal vazio (já que não vamos inserir via DOM os links); não devemos declarar mais o tipoPaiLink e opResetar. Vejo o exemplo:

  $(document).ready(function() {
    $().fontSize({
       alvo: '#content',
       setCookie: true
    });
  });

• 3. Classe “desabilitar” para quando o link chegar ao limite

  Nessa nova opção você precisa configurar apenas o CSS dando estilo a classe desabilitar, que será adicionada no link quando ele não estiver mais mudando o tamanho do texto.

  CSS

  #font_size li .disabilitar {
    color: #AFAFAF;
    background-color: #DFDFDF
  }

Resumidamente temos duas opções:

Inserir manualmente os links de controle.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript" src="font_size.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $().fontSize({
    alvo: '#content',
    setCookie: true
  });
});
</script>

XHTML

<ul>
  <li>tamanho da fonte:</li>
  <li><a href="javascript:;" class="menos" title="Diminuir tamanho da letra">A-</a></li>
  <li><a href="javascript:;" class="resetar" title="Tamanho padr&atilde;o">A</a></li>
  <li><a href="javascript:;" class="mais" title="Aumentar tamanho da letra">A+</a></li>
</ul>

Ou deixar o script fazer tudo sozinho.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript" src="font_size.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#font_size').fontSize({
    alvo: '#content',
    setCookie: true,
    opResetar: true,
    tipoPaiLink: 'ul'
  });
});
</script>

XHTML

<div id="font_size"></div>

Faça o download do Plugin Font Size 1.1 ou leia o post da primeira versão para entender melhor o funcionamento.