Jquery 完成动画制作后，使用淡入效果编写文本（html）

我一直在四处寻找以完成我的效果。 这是我的css代码。在所有li动画完成后，我希望我的文本一个接一个地出现在每个li的中心，并具有淡入效果。我尝试使用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>

$（函数（）{
$（“.content box blue”）.animate（{width:'350px'}，1200）；
$（“.content box gray”）.animate（{width:'250px'}，1200）；
$（“.content box绿色”）.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）；
});

以下是我在JSFIDLE上的代码，请尝试以下操作：-

不能将淡入效果应用于

.text（）

。相反，您可以放置带有淡入效果的文本的跨距

---

更新了小提琴，使文本一个接一个地出现。

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

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

}