Clever Geek Handbook

How to use jquery.animate () to mock 'text-align: right'

I am creating a very simple jquery menu. On hover, I have a menu on the right, which is the left margin of my menu container. This is easy since the text is aligned within the specified container.

However, I also have a menu on the left, and because the links (left-aligned) are of different lengths, the best I can do is adjust the padding to make the text lighter with an even amount between links. Therefore, the long link text goes to the right edge of the container, buying the short text only makes it about halfway.

After reading about this, I found out that you cannot change the text align property as it is not numeric. Is there any other way to do this?

Of course I tried:

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

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

Is there a way to ensure that all links are accessible to the outermost edge of the container?

+3


source to share


3 answers


You can make the element relative and they will animate the left / right properties

Here's the script: 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 });
});
+3


source


You cannot animate text alignment. You can only animate numeric values, not states.



+3


source


It seems to me if you know the width of the container and the width of the text, it should be possible, like psuedo code:

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


source






More articles:


All Articles