CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kappys
Kappys

Reputation: 703

animation in text, hide text right to left is mounted

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>

Upvotes: 1

Views: 550

Answers (1)

EdenSource
EdenSource

Reputation: 3387

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

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

Exemple

Upvotes: 2

Related Questions