I'm trying to achieve a seamless transition of movement and color change in my web project. Currently, the text is animated first, and only afterward does the color change take place. How can I make the text change color while it's moving?
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;
}
}
});