Código:
$("#id-elemento").hover(
function () {
$(this).animate({'top':'50px'},500);
},
function () {
$(this).animate({'top':'0px'},500);
}
);
Con eso consigues que al poner el raton encima, el elemento se mueva 50 pixeles hacia abajo y al salir el raton, vuelve a su posicion original (Te cuidado que si la animacion provoca que el elemento se aleje mucho, seguramente se salga del lugar donde el usuario coloco el raton y por lo tanto dispararia la segunda funcion que le hace volver a su sitio [el navegador detecta que el raton ya no esta sobre el elemento] )
Con animate() no tienes problemas con que uses posiciones absolutas o relativa, lo que no puedes es usar son medidas en porcentajes (puedes usar un numero solo, en px, en em, etc.. jquery lo convertira automaticamente todo a px, pero los porcentajes no los tolera [almenos hasta ahora siempre fue asi, quizas en alguna version nueva incluyan esta posibilidad, bastante interesante para layout liquidos y responsives]
Otra opcion, si quieres hacerlo solamente con CSS, es recurrir a CSS3 y usar transition
http://www.w3schools.com/css3/css3_transitions.asp, el unico incoveniente de esta opcion, es que nuestro "buen amado" internet explorer no entiende ni papa de esta propiedad (ie10 si lo interpreta.. pero es una version que aun esta en desarrollo, asi que hasta que sea un standar a nivel usuario......
)
Espero que te sirva, suerte!