jquery - アニメート完了後にフェードイン効果のあるテキスト(html)を書く

Question

私は自分の効果を完成させるために探し回っています。これが私のcssコードです。すべての li のアニメーションが完了した後、テキストを各 li の中央にフェードイン効果で 1 つずつ表示します。jquery text() でテキストを追加しようとしましたが、すべてのアニメーションが完了した直後にテキストにフェードイン効果を与えることができませんでした。私の問題への助けをいただければ幸いです。

<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>

ここにjsfiddleの私のコードがあります私の効果