文字动画，已安装从右到左隐藏文字

Question

I want to do a animation in text, hide text right to left, but the letters is mounted after animation... I know that I can use a white-space: nowrap but I need it see as a paragraph

how I can animated this text without mounted letters?

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> 

Answer 1

If it is possible depending on your layout, you should animate #container :

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

Exemple