javascript - 文本中的动画,从右到左隐藏文本已安装

标签 javascript jquery html css

我想在文本中做一个动画,从右到左隐藏文本,但是字母是在动画之后安装的...... 我知道我可以使用 white-space: nowrap 但我需要将其视为一个段落

如何在没有镶嵌字母的情况下为这段文字制作动画?

JSfiddle Example

        setTimeout(function () {
            $("#title").animate({width: 'hide'});
            $("#description").animate({width: 'hide'});
            $("#text1").animate({width: 'hide'});
        },2000);
.bold{
    font-size: 48px;
    color: black;
    width: 400px;
}
.normal{
    font-size: 48px;
    color: black;
    width: 400px;
}
#container{
    width: 452px;
    height: 625px;
}
#description{
    margin-top: 40px;
    margin-bottom: 50px;
}
#description,#text1{
    margin-left: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" >
        <div id="title" class="bold">
            1231231231123
        </div>
        <div id="description"class="normal">asd asd as da sd asdfsdfasdfasd asd fsadf asdf asdfasdf.</div>
        <div id="text1" class="bold">
            aaaaaaaaaaaaaaaa aaaaaaaaaaaa            
        </div>
    </div>

最佳答案

如果可能,根据您的布局,您应该为#container设置动画:

setTimeout(function () {
    $("#container").animate({
        width: 'hide'
    });
}, 2000);

Exemple

关于javascript - 文本中的动画,从右到左隐藏文本已安装,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29792767/

相关文章:

javascript - 同一页面上的 jQuery 和 javascript 代码不起作用

internet-explorer - IE9、HTML5 : Embedding HTML5 page into page with no doctype

html - 如何使用 HTML5、WinJS 在 Metro Apps 的垂直列中排列 ListView ?

javascript - 在 JavaScript 中的数组中查找下一个最高元素中的最低元素

javascript - d3.js中这两个代码块有什么区别

javascript - 使用 Javascript 在 iOS Safari 中检测震动?

javascript - 内部函数使用 setTimeout 调用父函数

javascript - 修改 Meteor.setInterval 函数中的类属性

javascript - 在字符串中的某些字符前后添加空格

javascript - 如何将 html 标签添加到 Angular 中 Quill 文本编辑器的内容 div?