CODEWITHSUNDEEP
jquerycssjquery-animate
shubendrak
shubendrak

Reputation: 2068

write text(html) with fade-in effect after animate complete

i have been searching around to get my effect completed. here is my css code. after the animation of all the li complete i want my text to appear one by one in the centre of each li with fade-in effect. i tried to add text with jquery text() but i was unable to give fade-in effect to text just after all animation completes. any help to my problem would be appreciated.

<nav>
    <ul>
        <li class="content-box-blue"> </li>
        <li class="content-box-gray"> </li>
        <li class="content-box-green"> </li>
        <li class="content-box-purple"> </li>
        <li class="content-box-red"> </li>
        <li class="content-box-yellow"> </li>
    </ul>
</nav>

<script>
$(function(){
    $(".content-box-blue").animate({width:'350px'},1200);
    $(".content-box-gray").animate({width:'250px'},1200);
    $(".content-box-green").animate({width:'300px'},1200);
    $(".content-box-purple").animate({width:'400px'},1200);
    $(".content-box-red").animate({width:'200px'},1200);
    $(".content-box-yellow").animate({width:'250px'},1200);
});
</script>

here is my code on jsfiddle my effect

Upvotes: 0

Views: 509

Answers (1)

PSL
PSL

Reputation: 123739

Try this:-

You cannot apply fade in effect to .text(). Instead you can place a span with the text with fade-in Effect.

Demo

 $(".content-box-blue").animate({width:'350px'},1200,function(){
            $('<span>Test Text</span>').fadeIn(1000).appendTo(this);
    });

Modified your css to centeralize the text:-

.content-box-gray {
    background-color: #FF69B4;
    border: 1px solid #bdbdbd;
    height: 50px;
    width: 0px;
    margin-left: 150px;
    border-top-left-radius: 12% 50%;
    border-bottom-left-radius: 12% 50%;
    text-align:center;
    line-height:50px;

}

Upvotes: 2

Related Questions