Con la función 'animate' de jQuery podemos realizar, de forma sencilla, una animación de, por ejemplo, nuestros menús, con unas pocas lineas de código. En esta página podéis ver el ejemplo talleresguadamia. Para realizar el ejemplo tenéis que descargar, e incluir en el 'head' de vuestra página este plugin jquery_plugin_color que extiende la función 'animate' al color. Esto es así porque el 'animate' original de jQuery sólo nos permite animar aquellas propiedades css numéricas. Como, por ejemplo, el padding, margin, width, etc... Añadiendo este plugin, también el color. El código del ejemplo es el siguiente:
function animaenlaces(){
enlace=$('a.but'); //recogemos en la variable qué enlaces queremos animar
$color=enlace.css('color'); //en la variable '$color' guardo el color original
enlace.hover(function() { //ejecutamos la función cuando el puntero esté encima del enlace
$(this).animate({ paddingTop: '5px' }, 100); //sobre el enlace en el que estamos ('this') cambiamos el valor de padding
$(this).animate({color:"#FFF"},100) //y también el color
},
function() { //ejecutamos esta función cuando el puntero salga fuera
$(this).animate({color:$color},100); //devolvemos el color original ($color)
$(this).animate({ paddingTop: 0 }, 100); //y el padding original (cero)
});
}
Fácil ¿no?. Sólo recordad un par de cosas: 'hover' permite más de una función en sus argumentos, la primera se ejecuta cuando el puntero del ratón está encima del elemento seleccionado y la segunda cuando sale fuera sería algo como:
$('mi id o class').hover(function(){código puntero encima}, function(){código puntero fuera})
La segunda cosa a recordar, y muy importante, es que tenemos que devolver primero el color original antes que el padding, en la segunda función, sino se nos quedarán los enlaces (o lo que sea) del color que cambiamos (blanco en este caso). Esto ocurre si pasamos el puntero del mouse rápido y repetidamente por encima.
function animaenlaces(){
enlace=$('a.but'); //recogemos en la variable qué enlaces queremos animar
$color=enlace.css('color'); //en la variable '$color' guardo el color original
enlace.hover(function() { //ejecutamos la función cuando el puntero esté encima del enlace
$(this).animate({ paddingTop: '5px' }, 100); //sobre el enlace en el que estamos ('this') cambiamos el valor de padding
$(this).animate({color:"#FFF"},100) //y también el color
},
function() { //ejecutamos esta función cuando el puntero salga fuera
$(this).animate({color:$color},100); //devolvemos el color original ($color)
$(this).animate({ paddingTop: 0 }, 100); //y el padding original (cero)
});
}
Fácil ¿no?. Sólo recordad un par de cosas: 'hover' permite más de una función en sus argumentos, la primera se ejecuta cuando el puntero del ratón está encima del elemento seleccionado y la segunda cuando sale fuera sería algo como:
$('mi id o class').hover(function(){código puntero encima}, function(){código puntero fuera})
La segunda cosa a recordar, y muy importante, es que tenemos que devolver primero el color original antes que el padding, en la segunda función, sino se nos quedarán los enlaces (o lo que sea) del color que cambiamos (blanco en este caso). Esto ocurre si pasamos el puntero del mouse rápido y repetidamente por encima.
Comentarios
Publicar un comentario