Question

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

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

在阅读本文时，我了解到您无法修改text align属性，因为它不是数字。还有其他办法吗？

我当然试着去：

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

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

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

Answer 1

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

Answer 2

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

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

HTML：

<div id="parent">
    <a href="#">Hover here</a>
</div>

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 3

如果你知道容器的宽度和文本的宽度，我觉得这应该是可能的，就像伪代码一样：

<div id="container">
    <span id="text">Some Text!</span>
</div>
$(#container).css('margin-left',(widthOf#Container - widthOf#Text) + 'px' );

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

3 个答案: