Jquery从左到右动画宽度答案

【问题标题】：Jquery animate width from left to rightJquery从左到右动画宽度
【发布时间】：2011-08-03 09:23:54
【问题描述】：

我正在尝试为将鼠标悬停时宽度从 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'})  
});  


});

我已经找到了一些其他的答案，但我不明白建议的解决方案。

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

这是默认行为。改变这一点的唯一方法是通过 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;
}

【讨论】：

谢谢！太容易了。当矩形缩小时，文本向左移动，试图保持我设置的正确填充。我解决了它在“#navigation li a”而不是“#navigation li”中设置填充。
新麻烦，试图要求跟进（告诉我您是否认为最好打开一个新问题）：如何禁用所选链接的动画（即链接主页未动画如果您在主页中）？通常我使用 body 类和 php if 来实现它，但是这次我无法禁用动画。谢谢
我建议你只检查页面的 URL，用户端。这样，您就可以减轻 PHP 的不必要负担。就像URL: http://my-site.com/pages/home 一样，您可以使用window.location.pathname 解析PHP 中的页面url。
感谢 NeXXeuS。由于我主要是“复制和粘贴程序员”，因此我设法以类似的方式做到了（我在 wordpress 上）。我用 wp php（is_page、is_home 等）检查哪个页面是活动的，如果不是，我在每个按钮上放一个“sel”类，不包括活动的按钮。在 JS 动画代码中，我只选择了“#navigation sel”元素。粗糙...但有效！再次感谢。

【解决方案2】：

您可以通过 css 定位轻松控制它。使用浮动或使用位于左侧或右侧（相对或绝对）的内部容器。

【讨论】：