使用jquery为文本对齐设置动画

Question

点击按钮$('#btn').click()，我想要一组span元素设置为CSS text-align right（最初是文本对齐的左边）并使其动画化，以便文本幻灯片从左到右。

我尝试使用.animate({ 'text-align': "left")，但似乎无效。 我再次尝试使用.addClass('alignRight', 1000)并且文本确实发生了变化，但没有滑动效果。当我尝试.addClass('floatRight', 1000)时，它与alighRight具有相似的效果。

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

那么如何从左到右给出滑动效果呢？标记就像

<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>

Answer 1

HTML标记（无更改）

<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标记

.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代码

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

Demo here

PS：我宁愿使用CSS position relative + absolute以及CSS overflow + left properties。