Jquery从左到右的动画宽度

我正在尝试对菜单元素进行动画处理，在鼠标悬停时将宽度从 170 像素缩小到 150 像素。 我的问题是，默认的 .animate 收缩发生在矩形的右侧，我需要它在左侧收缩。我已经尝试过对左边距进行动画处理，但由于元素内部有文本，因此它在动画过程中会向右移动。

这是我正在使用的实际代码

$(document).ready(function(){  

//When mouse rolls over  
$("#navigation li").mouseover(function(){  
    $(this).stop().animate({marginLeft:'20'},{queue:false, duration:600, easing: 'easeOutBounce'}) 

});  

//When mouse is removed  
$("#navigation li").mouseout(function(){  
    $(this).stop().animate({marginLeft:'0'},{queue:false, duration:600, easing: 'easeOutBounce'})  
});  


}); 

我找到了一些其他答案，但我不明白所提出的解决方案。

这是默认行为。改变这个的唯一方法是通过 CSS

#navigation li {
float: right; //Sometimes using float funks things up so...
}

或者更改父级和子级li的CSS（更好的解决方案）

#navigation_li's_parent {
text-align: right;
}

#navigation li {
display: inline-block;
}