使用jquery对文本进行动画处理

问题描述

| 单击按钮

$(\'#btn\').click()

，我希望一组

span

个元素被设置为CSS文本右对齐（本来是文本左对齐），并使其具有动画效果，以便文本从左向右滑动。 我尝试使用

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

    

解决方法

        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);
});

在这里演示 PS：我宁愿使用CSS位置相对+绝对以及CSS溢出+ left属性。