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 上的代码 my effect

Answer 1

试试这个:-

您不能对 .text() 应用淡入淡出效果。相反，您可以放置​​一个具有淡入效果的文本跨度。

Demo

 $(".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;

}