jquery - 动画完成后写入带有淡入效果的文本（html）

Question

我一直在四处寻找以完成我的效果。这是我的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>

这是我在 jsfiddle 上的代码我的效果

Answer 1

试试这个：-

您不能将淡入效果应用于.text()。相反，您可以使用淡入效果放置带有文本的跨度。

演示

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

修改了您的 CSS 以使文本居中：-

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

}