完成動畫後寫入文字（html）並淡入效果

Question

我一直在四處搜尋以完成我的效果。 這裏是我的css代碼。在所有李的動畫完成後，我希望我的文本在淡入效果的每個李的中心逐一出現。我試圖添加jQuery文本（）的文本，但我無法給所有動畫完成後的文本淡入效果。任何幫助我的問題，將不勝感激。

<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來centeralize文本： -

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

}