Animaciones sobre botones en HTML con jQuery

Como comente en mi tip de animar saltos de ancla con jQuery, si agradecen mi tiempo, yo les doy mas tips. Haremos un simple efecto de luz sobre elementos HTML con jQuery. La idea es que al posar el Mouse sobre un elemento, este se torne de cierto color ( Blanco para así dar el efecto mas parecido a luz ).

Es mas fácil de lo que se imaginan. No logra la calidad de Flash, aunque se podría, pero me da lata explicarlo.

Jquery cuenta con un método llamado "hover" el cual se basa en que si pasas el Mouse sobre el/los selector(es); podrá obtener evento de entrada y de salida( mouseover y mouseout ).

Uso del método hover de jQuery

Código :

jQuery( selector ).hover( function(){
//MouseOver...
},
function(){
//MouseOut...
});

El segundo parámetro de el método es opcional, pero recomiendo siempre definir, aunque este vació

Efecto FXlight en jQuery

Código :

jQuery('.FXlight').hover(function(){
            if(jQuery(this).attr('FXlight')==undefined){
               jQuery(this).attr('FXlight',true).animate({
                  opacity:0.4
               },250).animate({
                  opacity:1.0
               },250,function(){
                  jQuery(this).removeAttr('FXlight');
               });
            }
         },function(){});

Al posar el Mouse sobre el selector, se crea un atributo llamado "FXlight", el cual servirá para comprobar que no este en proceso( así, si pasas mil veces el mouse antes de que termine el efecto, este no se repite ). Si todo anda bien, osea el atributo "FXlight" no existe, se activa el efecto y da opacidad "0.4", luego apenas esto termina da opacidad "1.0"( el máximo ), lo cual genera una suerte de efecto de Luz.

Para que esto sea bien vistoso, propongo que usen el color blanco( #FFFFFF ) como fondo( background-color ), de manera que si pasan el mouse sobre el elemento y este esta con el fondo blanco( pero que no se vea, osea pongan una imagen por ejemplo, o bien, un elemento que tenga otro color, y este este dentro de un contenedor blanco ) se vera el efecto de luz muy mono.

Puedes ver un demo en mi sitio web

Espero comentarios

 

Tweet