javascript - jQuery - 如何同时为文本设置动画以进行颜色变化过渡

Question

我需要创建运动和颜色变化的平滑过渡。现在，首先对文本进行动画处理，只有 动画结束后，才会发生颜色变化过渡。如何在移动过程中更改文本的颜色？
这是HTML代码:

<button type="button" class="btn btn-danger center-block" id="btn">start animation</button>
<div id="meterText" class="col-centered"></div> <!-- animated text -->

CSS:

#meterText{
    display:none;
    width: 50px;
    height: 10px;
    margin-left: 40px;
    position: absolute;
    top: 211px;
    font-size: 15px;
    color: red;
}

jQuery:

var counter=0;

$("#btn").on('click',function(event){
    counter++;
    console.log(event.target.id + " was clicked");
    switch(counter){
        case 1:{
            $("#meterText").text("first transition");
            $("#meterText").hide().fadeIn();
            break;
        }
        case 2:{

            $("#meterText").animate({'marginTop':"-=83px"});
            $("#meterText").text("second transition");
            $("#meterText").animate({color: "#FFD700"});
            break;
        }
        case 3:{
            $("#meterText").text("third transition");   
            $("#meterText").animate({'marginTop':"-=68px"});
            $("#meterText").animate({color: "#44c767"});
            break;
        }
    }
});

jsFiddle

Answer 1

默认情况下，jquery 中的 animate 一个接一个地工作。所以如果你有 2 个 animate .. 第二个在第一个完成后运行我想知道为什么你在分开的行中使用代码，而你可以将它简化为只有一行

$("#meterText").animate({'marginTop':"-=83px",color: "#FFD700"}).text("second transition");