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

【问题标题】：jQuery - How to animate text simultaneously to color change transitionjQuery - 如何同时为文本设置动画以进行颜色变化过渡
【发布时间】：2015-04-21 06:53:58
【问题描述】：

我需要创建运动和颜色变化的平滑过渡。现在，文本首先被动画化，只有在动画结束后才会发生颜色变化过渡。如何在移动期间更改文本的颜色？
这是 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

【问题讨论】：

在第一个动画函数中也传递颜色变化
查看Fiddle
或者你可以传递 queue: false 作为参数，如果你想保持动画分开。 jsfiddle.net/K9LpL/1048

标签： javascript jquery css jquery-animate coloranimation

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

只需同时执行动画：

查看DEMO

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

【讨论】：

【解决方案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 设置持续时间看看sn-p

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

【讨论】：

不错的解决方案，它似乎打破了jQuery的fadeIn动画。如何解决这个问题？