Jquery animate width from left to right

问题

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.

回答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;
}

回答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).

来源：https://stackoverflow.com/questions/5627260/jquery-animate-width-from-left-to-right