[Resolvido] JQuery Fade Colorido Hover

[Eliseu M. 2]

Eae gente. Tô aqui dnv. Cacei mais um plugin de JQuery muito interessante, criado por Nakajima (nakajima.github.com). Ele tem a função de fazer um fade colorido onmouseover. É muito simples:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Step 1

 

Incluir o JQuery (isso todo mundo já sabe) e incluir dois scripts do plugin (é melhor baixá-los e hospedá-los):

<script src="http://nakajima.github.com/jquery-glow/src/jquery-1.3.2.js" type="text/javascript" charset="utf-8"></script>
<script src="http://nakajima.github.com/jquery-glow/src/jquery.color.js" type="text/javascript" charset="utf-8"></script>
<script src="http://nakajima.github.com/jquery-glow/src/jquery-glowing.js" type="text/javascript" charset="utf-8"></script>

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Step 2

 

Inserir o script que chama a função e configura as cores:

<script type="text/javascript">

$(document).ready(function() {

$('.demo').addGlow({ textColor: '#00FF00', haloColor: '#0000FF', radius: 30, duration: 400 });

$('*').bind('glow:started', console.info);

$('*').bind('glow:canceled', console.info);

});

</script>

Em vermelho: a classe do elemento.

Em verde: cor do texto ao passar o mouse.

Em azul: cor do glow (brilho).

Em rosa: o tamanho do glow.

Em laranja: o tempo de duração da animação.

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Step 3

 

Incluindo numa DIV:

<div class="demo">Home</div>

 

Testei em dois navegadores:

 

- Google Chrome: funcionou perfeitamente.

- Firefox: funcionou apenas o efeito no texto, mas o brilho não =[

 

Até mais gente, espero que seja útil xD

 

Créditos: GITHUB, JQuery, SquareFree.