Efeitos de animação em menus com jQuery

O jQuery trouxe aos desenvolvedores diversas facilidades na hora de implementar interações client-side. Uma delas é a opção de criar animações, com uma simples função animate conseguimos obter belos efeitos visuais.

Diria até que essa função é a melhor maneira de substituir o flash (pelo menos em menus). Pois menus em flash quebram o conceito de acessibilidade de qualquer site. O jquery acaba sendo a melhor opção de obter efeitos animados legais sem comprometer a acessibilidade.

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.