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

只需同时执行动画：

检查DEMO

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

Answer 2

默认情况下，jquery中的animate逐个工作..所以如果你有2个动画..第二个在第一个完成之后运行 我想知道为什么你在单独的行中使用代码，而你可以将它简化为一行

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

Answer 3

您好我建议您使用css进行自动转换，在您的css选择器中使用此css：

-moz-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
 transition-duration: 0.6s;

然后在你的jquery中使用.css而不是.animate它会顺利工作你可以设置css的持续时间 看看片段

＆＃13;

＆＃13;

var counter=0;

$("#kickme").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").css({'marginTop':"-=83px","color": "#FFD700"});
			$("#meterText").text("second transition");
			break;
		}
		case 3:{
			$("#meterText").text("third transition");
            $("#meterText").css({'marginTop':"-=68p","color": "#44c767"});
			break;
		}
	}
	
});

＆＃13;

#meterText{
	display:none;
	width: 50px;
	height: 10px;
	margin-left: 40px;
	position: absolute;
	top: 211px;
	font-size: 15px;
	color: red;
    	-moz-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-danger center-block" id="kickme">kick me!</button>

<div id="meterText" class="col-centered"></div> <!-- meter's text -->

＆＃13;

＆＃13;

＆＃13;