0 Compartilhamentos 665 Views

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.

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

XHTML:
Inicio
Portfolio
Contato

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 );
});
});

Como pode ver é bem simples, graças ao jQuery, abaixo temos o código completo com mais exemplos, segue em anexo também o codigo completo.

Veja este código em funcionamento

Arquivos para Download:

menu.html

Carregando...

Você pode se interessar

Como a Nvidia está usando rede neural no lugar de codecs de vídeo
Artigos
5 visualizações
Artigos
5 visualizações

Como a Nvidia está usando rede neural no lugar de codecs de vídeo

Carlos L. A. da Silva - 25 de novembro de 2020

Maxine é uma solução de aprendizado de máquina na nuvem que reduz a quantidade de dados transmitidos, deduzindo e gerando as partes que faltam.

Promoções de Jogos do Final de Semana (20/11)
Notícias
12 visualizações
Notícias
12 visualizações

Promoções de Jogos do Final de Semana (20/11)

Carlos L. A. da Silva - 20 de novembro de 2020

Confira as melhores ofertas de jogos de PC para o final de semana.

Top 10 soft skills para desenvolvedores
Artigos
13 visualizações
Artigos
13 visualizações

Top 10 soft skills para desenvolvedores

Carlos L. A. da Silva - 20 de novembro de 2020

Não basta saber programar bem... confira o que as empresas também estão procurando em um profissional de desenvolvimento.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Como detectar um bloqueador de anúncios usando uma linha de Javascript
Dicas
17 visualizações
17 visualizações
Promoções de Jogos do Final de Semana (13/11)
Notícias
23 visualizações
23 visualizações

Promoções de Jogos do Final de Semana (13/11)

Carlos L. A. da Silva - 13 de novembro de 2020
Como extrair imagens de um documento Word/LibreOffice com inteligência
Dicas
20 visualizações
20 visualizações
Promoções de Jogos do Final de Semana (06/11)
Notícias
27 visualizações
27 visualizações

Promoções de Jogos do Final de Semana (06/11)

Carlos L. A. da Silva - 6 de novembro de 2020