Comment utiliser jquery .animate () pour simuler "text-align: right" - jquery

Je construis un menu très simple jQuery. En vol stationnaire, j'ai un menu à droite qui s'adapte à la marge gauche de mon conteneur de menus. Ceci est facile car le texte est aligné à gauche dans le conteneur.

Cependant, j'ai aussi un menu sur la gauche, etParce que les liens (justifiés à gauche) ont des longueurs différentes, le mieux que je puisse faire est d’ajuster le remplissage pour que le texte soit uniforme entre les liens. Par conséquent, le texte du lien long va vers le bord droit du conteneur, acheter du texte court le fait à peu près à la moitié.

En lisant à ce sujet, j'ai appris que vous ne pouvez pas modifier la propriété d'alignement du texte car elle est non numérique. Y a-t-un autre moyen de faire ça?

J'ai bien sûr essayé d'aller avec:

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

mais cela a fait sauter le texte à droite au lieu de la facilité.

Existe-t-il un moyen de s’assurer que tous les liens passent dans la marge la plus à droite du conteneur?

Réponses:

Vous pouvez rendre l'élément relatif, et les animer propriétés gauche / droite

Voici un violon: 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 });
});

Vous ne pouvez pas animer text-align. Vous ne pouvez animer que des valeurs numériques, mais pas des états.

Il me semble que si vous connaissez la largeur du conteneur et la largeur du texte, cela devrait être possible, en code psuedo:

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