如何使用jquery .animate（）来模拟'text-align：right' [英] How to use jquery .animate() to mock 'text-align:right'

问题描述

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

I am building a very simple jquery menu. On hover, I have a menu on the right easing to the left margin of my menu container. This is easy, as the text is left aligned within said container.

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

However, I also have a menu on the left, and because the links (left justified) are of differing length, the best I can do is adjust the padding to ease the text a uniform amount between links. Therefore, long link text goes to the right edge of the container, buy short text only makes it about half way.

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

In reading about this, I have learned that you can not modify the text align property as it is non numeric. Is there any other way to do this?

我当然试图采用：

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

但这使得文本跳转到右边而不是轻松。

but that made the text jump to the right instead of ease.

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

Is there any way to ensure all links ease to the rightmost margin of the container?

推荐答案

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

You can make the element relative, and them animate left/right properties

这是一个小提琴： 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 });
});

这篇关于如何使用jquery .animate（）来模拟'text-align：right'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！