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 中的动画一个接一个地工作。所以如果你有 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 设置持续时间 查看代码段

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;
  }
 }
 
});

#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;
}

<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 -->