El error es que el area de mouseover/mouseout cambia con el efecto que tiene sobre la misma; asi que lo que tiene que hacer es meter la animación en un contenedor con un tamaño estatico, y
asignarle el evento a este contenedor.
Y para evitar que el evento se "dispare" en multiples ocaciones lo mejor es usar mouseenter y mouseleave de jQuery.
Quedaria asi:
Código Javascript
:
Ver original$(function(){
$("#animar").mouseenter(function(){
$("#imagen").stop().animate({'width': "130px"})
}).mouseleave(function(){
$("#imagen").stop().animate({'width': "150px"})
})
})
Código HTML:
Ver original<a href="#" id="animar" style="width:150px; height:140px; background-color:#FFF; display:inline-block" ><img id="imagen" src="http://awsimx.fathermag.com/daughter/girl_with_cat_8776698_XS_400x300.jpg" width="150" /></a>
Aquí lo puede ver funcionando:
http://jsfiddle.net/PTGUZ/
Por cierto, esto tambien sucede cuando se cambia el tamaño del elemento en estado :hover CSS (aunque en ese caso la solucion es diferente)