Pues te diré que lograr hacer funcionar hover+animate con jquery se puede poner feo. Te diré porqué:
Aparentemente puede funcionar bien al realizar las primeras pruebas pero si le exigimos un poco de más podremos notar inconsistencias como por ejemplo al cambiar de "objeto" muy rapidamente y luego regresar al primer objeto, si la animación del primer evento "hover" no se ha completado entonces la animación del segundo hover en vez de empezarse de cero se empezará justo donde la primera animación se quedó.
Esto muchas veces trae resultados inesperados pero, ¡es solucionable! Recuerdo haber leído hace un tiempo las mejores formas de utilizar .hover(), mouseenter(), etc. Sinceramente no las recuerdo pero puedes googlearlas, te aseguro que encuentras algo (:
Un ejemplo sencillo -el primero que se me ocurrió- al usar hover() sería algo asi:
Código Javascript
:
Ver original$("#nombredelaregion").hover(
function(){ //el cursor entra
$('#areadelmapa').addClass( "hover" );
}, function(){ //el cursor sale
$('#areadelmapa').removeClass( "hover" );
}
);
Código CSS:
Ver original#areadelmapa{
transition:blue 500ms;
}
#areadelmapa.hover{
background-color:blue;
}
Ventajas:
- Le dejamos el problema de las animaciones al navegador y asi evitamos el problema que te mencioné arriba.
Desventajas:
- transition tiene
80.59% de soporte (realmente no esta tan mal)
Nota: No me he leído tu código asi que lo que te dejé aquí arriba fue extremadamente genérico y tendrás que acoplarlo a tu proyecto por tí mismo, solo intento darte un punto de partida para investigar y escoger las herramientas que más te convengan (:
Puedes encontrar información adicional en el
API de jQuery (en inglés).
Espero te sea de utilidad (: