Question

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.

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?

I of course tried to go with:

$('#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?

Answer 1

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

Here’s a fiddle: 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 });
});