Jquery从左到右设置动画宽度 [英] Jquery animate width from left to right

问题描述

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

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.

推荐答案

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

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...
}

或更改CSS父母和子女李（更好的解决方案）

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

这篇关于Jquery从左到右设置动画宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！