Efecto de transición en botón con JQuery

Código para generar un efecto de transición al pasar por encima de un botón, lo primero es tener dos imágenes del botón, la primera sera la imagen del botón en un estado normal y el otro botón es la imagen en el estado cuando el cursor del mouse esta encima (evento mousehover).

Los botones serian algo como estos:

Botón que se usara cuando el cursor del mouse pase por encima

Botón que se usara cuando el cursor del mouse este fuera

Ahora el código css

<style type="text/css">
#barraNavegacion{
background-color:#e7e7e7;
height: 60px;
width: 150px;
border: 1px solid #bbb;
}

#boton{
left: 20px;
top: 20px;
position: absolute;
width: 84px;
height: 36px;
background-color: #e7e7e7;
border: 1px solid #7c7c7c;
clip:rect(0,86,38,0);
}

#imagen
{
position: absolute;
left: 0px;
background-color: #e7e7e7;
text-align:center;
padding:2px;
}
#imagen_hover
{
position: absolute;
left: -86px;
background-color: #696969;
text-align:center;
padding:2px;
}
</style>

El código javascript

<script languague="javascript">
$(document).ready(function(){
$('#boton').mouseenter(function(){
$("#imagen").animate({"left": "86px"},500);
$("#imagen_hover").animate({"left": "0px"},500);
});
$('#boton').mouseleave(function(){
$("#imagen_hover").animate({"left": "-86px"},500);
$("#imagen").animate({"left": "0px"},500);
});
});
</script>

El código html

<div id="barraNavegacion">
<div id="boton">
<span id="imagen"><img src="imagenes/inicio.png"></span>
<span id="imagen_hover"><img src="imagenes/inicio-hover.png"></span>
</div>
</div>

El resultado es como se ve a continuación, pasa el cursor del mouse por encima del bóton