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;

}

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

1 个答案: