Necesito opiniones sobre el siguiente código en jQuery para animar enlaces. Este es el código que tengo en el index de la página:
Código:
(function(){
var enlace=$('a.but');
$color=enlace.css('color');
padding=enlace.css('paddingTop');
animaenlaces(enlace);
if (padding=='0px' && $color=='#FFF') {enlace.css('color',$color)};
})();
Y el siguiente código (el que anima los enlaces) está en un archivo aparte donde tengo otras funciones:
Código:
var animaenlaces=function(enlace){
enlace.hover(function() {
$(this).animate({ paddingTop: '5px' }, 100);
$(this).animate({color:"#FFF"},100)
}, function() {
$(this).animate({ paddingTop: 0 }, 100);
$(this).animate({color:$color},100);
})
}
Pues bueno, el tema es el siguiente: la función 'animaenlaces' lo que hace es bajar 5px el enlace sobre el que tienes el puntero del ratón, y cambiar su color a blanco, y cuando retiras el puntero vuelve a su posición y color originales. La función trabaja bien excepto por un pequeño problema. Si pasamos el ratón rápido y repetidamente sobre los enlaces, al final se quedan con el color blanco y eso no lo quiero, por eso me inventé el primer código que está en el index de la página principal. Así como lo tengo todo funciona perfectamente pero me parece algo enrevesado, complicado. ¿Alguien tiene alguna idea para hacerlo más sencillo?.