Animate text alignment using jquery

Question

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 m

Answer 1

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.