使用jQuery对文本进行动画处理 [英] Animate text alignment using jquery

问题描述

单击按钮$('#btn').click()时，我希望一组span元素设置为CSS文本右对齐(本来是文本左对齐)，并使其具有动画效果，以便文本从左向右滑动

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.

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

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标记(不变)

<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溢出+左属性.

Demo here

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

这篇关于使用jQuery对文本进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！