animate text-align with jquery

Question

I'm new to jquery and have developed a simple resizing navigation menu using

$(this).stop().animate({width:170},"slow");

for the on hover effect.

My question is, how would i be able to add an animate effect to changing the text alignment.

I understand that this changes it:

$('.myElementClass').css('text-align','center');

but it looks ugly, and:

$(this).stop().animate({'text-align: left'}, "slow");

does'nt work at all.

Answer 1

The jQuery animate() function will only animate CSS properties that are numeric.

The answer, then, is not to rely on text alignment, but to actually figure out where the text should appear and use relative positioning to place it, and animate the change in position.

In other words, you get the width of your element and the width of the container, and calculate where you want to place the element, using, say, the elements left property. Then, when you resize, you recalculate the correct location, and animate the move from the current location to the new location.