Animate text alignment using jquery
<p>At the click of a button <code>$('#btn').click()</code>, I want a group of <code>span</code> elements be set with CSS text-align right (originally text-aligned left) and make it animated so that the text slides from left to right.</p>

<p>I tried with <code>.animate({ 'text-align': "left")</code> but it doesn't seem to work.
I tried with <code>.addClass('alignRight', 1000)</code> again and the text did change but there is no sliding effect. When I tried with <code>.addClass('floatRight', 1000)</code>, it has similar effect with <code>alighRight</code>.</p>

<pre><code>.alignRight{ text-align : right;}
.floatRight(float: right;}
</code></pre>

<p>So how do I give a sliding effect from left to right? The markup is like</p>

<pre><code>&lt;div id="main" style="width: 300px;"&gt;
    &lt;div class="item" style="width: 100%;"&gt;
        &lt;span class="info"&gt;Strings&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="item" style="width: 100%;"&gt;
        &lt;span class="info"&gt;Strings&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
