如何使用jquery .animate（）来模拟’text-align：right’

我正在构建一个非常简单的jquery菜单。 在hover时，我右边的菜单缓到菜单容器的左边缘。 这很容易，因为文本在所述容器内保持对齐。

但是，我左边也有一个菜单，因为链接（左对齐）长度不同，我能做的最好是调整填充以使文本在链接之间保持统一的数量。 因此，长链接文本会转到容器的右边缘，购买短文本只会使其大约一半。

在阅读本文时，我了解到您无法修改text align属性，因为它不是数字。 有没有其他方法可以做到这一点？

我当然试着去：

$('#selector').css('text-align':'right') 

但这使文本向右跳而不是轻松。

有没有办法确保所有链接都能轻松到达容器的最右边？

Answer 1

您可以使元素相对，并为它们设置左/右属性的动画

这是一个小提琴： http ： //jsfiddle.net/6cAYv/

HTML：

 
 Hover here  

JS：

 $('#parent').hover(function(){ var a = $(this).find('a').first(); a.css('position', 'relative').animate({ left: $(this).width() - a.width() }); },function(){ $(this).find('a').first().animate({ left:0 }); }); 

Answer 2

您无法为text-align设置动画。 您只能为数值设置动画，但不能设置状态。

Answer 3

对我来说，如果您知道容器的宽度和文本的宽度，这应该是可能的，如伪造的代码：

 
 Some Text! 
 $(#container).css('margin-left',(widthOf#Container - widthOf#Text) + 'px' );