jQuery - How to animate text simultaneously to color change transition

I need to create a smooth transition of movement and color change. Right now, the text first is being animated, and only after animation end the color change transition occurs. How can I change the color of the text during the movement?
This is the HTML code:

<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

by Default animate in jquery works one by one .. So if you have 2 animate .. the second one run after the first one finished I wondered why you used the code in separated lines while you can simplified it to just one line

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