jQuery动画从左到右的宽度

Question

I am trying to animate menu elements shrinking the width from 170 to 150px on mouseover. My problem is, with the default .animate shrinking happens on the right side of my rectangle, I need it to shrink on the left side. I have already tried animating left margin, but since I have text inside the element, it shifts on the right during the animation.

This is the actual code I'm using

$(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'})  
});  


}); 

I had found some other answers to this, but I didn't understand the proposed solution.

Answer 1

This is the default behavior. The only way to change this is via CSS

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

or changing the CSS of the parent and the child li (better solution)

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

#navigation li {
display: inline-block;
}

Answer 2

You can easily control this with css positioning. Either with floats or with an inner container that is positioned either left, or right (relative, or absolute).