At the click of a button $('#btn').click(), I want a group of span 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.

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

.alignRight{ text-align : right;}
.floatRight(float: right;}

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

<div id="main" style="width: 300px;">
    <div class="item" style="width: 100%;">
        <开发者_如何学编程;span class="info">Strings</span>
    </div>
    <div class="item" style="width: 100%;">
        <span class="info">Strings</span>
    </div>
</div>

HTML markup (no change)

<div id="main" style="width: 300px;">
    <div class="item">
        <span class="info">Strings</span>
    </div>
    <div class="item">
        <span class="info">Strings</span>
    </div>
</div>

CSS markup

.info {
    display: block;   /* width works better on block level elements */
    text-align: right;
    width: 20%;       /* use something sensible as the default value */
    overflow: hidden; /* if you choose 0% for the above property then use this */
}

jQuery code

$(document).ready(function() {
    $(".info").animate({
        width: "100%"
    }, 1000);
});

Demo here

PS: I'd rather use CSS position relative+absolute along with CSS overflow+left properties.