Hover animado com jQuery

Hover animado com jQueryVamos a mais um simples efeito, mas que dá um toque especial aos seus botões ou menus. Aprenda a substituir a propriedade “title” das suas Tags, utilizando um hover animado com jQuery bem mais elegante.

 

Definitivamente, todos nós desenvolvedores de websites, nos preocupamos muito com a questão da usabilidade e design de interface para o usuário, pois afinal, ele é o nosso cliente. Simples efeitos como este, pode causar bons resultados para um website. Veja aqui, como fazer um efeito de “passar o mouse” estiloso para o seu website

Código jQuery utilizado:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".menu a").hover(function(){
		$(this).next("em").stop().animate({opacity: "show", top: "-75"}, "slow");
	},
	function(){
		$(this).next("em").stop().animate({opacity: "hide", top: "-85"}, "fast");
	});
});
</script>


Caso queira baixar:

Lucas Peperaio

Estudante de Ciência da Computação, trabalho com desenvolvimento web há 5 anos e com hardware há 8. Nas horas vagas, sou entusiasta de Overclock, Casemod e Benchmarks, além é claro dos Games. Apaixonado por informática e pela vida, procuro compartilhar meus conhecimentos e assim, ajudar as pessoas. Siga-me no youtube, posto semanalmente muito material sobre Hardware, tecnologia e games em geral: Clique aqui

Receba gratuitamente em seu E-mail
Novos artigos do meu Blog!


Após o Cadastro você receberá um Email Automático. Clique no link enviado para Ativar e receber as novidades.

Categorias do site





5 Comentários Deixe o seu

  1. Igor paim

    Gostei muito do seu Blog, juro que daqui para frente usarei como referencia em algums temas. @zigorpaim

  2. Luiz Campedelli

    Tá faltando um Stop() ai, se vc passa o mouse mais de uma vez fica mexendo sem parar :P

    Mas eu gostei, achei bem interresante, parabéns!

  3. Lucas Peperaio

    Sim Luiz Campedelli, faltou o stop() antes do animate, para ele parar a última animação antes de comecar outra. Código corrigido. valeu

  4. fagner

    concordo seu seu blog e bacana também, vou usa-lo muito aparti de agora, eu estou aprendo sozinho em casa a criar sites abraço

  5. JV

    cara gostei da tecnica bem interessante, melhor do que ter que carregar um plugin de tooltip. valeu