jQuery – 动画backgroundColor，取决于宽度百分比
我正在为我的设备规格页面构建等级/分数栏，我有一个使用transition和animation的基本动画，但最终的结果并不是我所追求的。 为了您的选择，CSS代码保留在原位（禁用animation属性）， 这是目前的情况 – JSFiddle同样的事情 。
我之前的一个问题是让动画工作，取决于条形图的百分比，我当前使用的方法来自该问题中的选定答案。 不幸的是，最终的结果虽然不错，却没有提供我最初的function。
例如，就像当前一样，当页面加载时提供特定的背景颜色，然后转换进行。
理想情况下，我在CSS中启用animation属性后会得到的结果，但同样存在问题。 它更接近我的目标，但不是解决方案。
我正在寻找的是这样的（希望我已经解释得这么好了）。 所有这些对背景颜色的更改都应该在转换（宽度）发生时发生。
-
当
width等于0％到24％时，背景颜色应为红色，因此条形将从红色开始 –#a41818 -
如果
width等于25％至49％，背景颜色应从红色变为橙色 –#87581c -
如果
width等于50％至74％，背景颜色应从橙色渐变为黄色 –#997815 -
如果
width等于75％到89％，背景颜色应该从黄色变为绿色 –#659a1f -
如果
width等于25％到49％，背景颜色应该从绿色渐变到绿色 –#3a8d24
而且，如果宽度恰好保持在特定的百分比，例如56％，则条形背景颜色应保持与其百分比范围相对应的颜色。 在这种情况下，56％将是黄色。 如果条宽为12％，颜色应保持红色等。
如果您需要更多细节，或者如果您需要进一步澄清，请告诉我。
谢谢！
如果我理解正确，您只想根据动画制作时的百分比来设置颜色动画。 它是否正确？
如果是这样，并且基于您在示例中提供的内容，我建议您查看jQuery的animate函数并使用step回调来检查动画中每个步骤。
到目前为止，我已经尝试过将css和jquery结合起来。 我很想看到一个完整的CSS示例！
jQuery
// wrap this in an anonymous to help namespace collisions // and to help with faster variable lookup. ;(function (document, $) { $(document).ready(function () { $('.rating-bar').each(function () { var _this = $(this), size = _this.data('size'); _this.animate({ width: size + '%' }, { duration: 2500, step: function (progress) { _this.css({ backgroundColor: progressColor(progress) }); } }); }); }); function progressColor(progress) { if (progress >= 0 && progress <= 24) return '#a41818'; else if (progress >= 25 && progress <= 49) return '#87581c'; else if (progress >= 50 && progress <= 74) return '#997815'; else if (progress >= 75 && progress <= 89) return '#659a1f'; else if (progress >= 90 && progress <= 100) return '#659a1f'; } })(document, jQuery);
更新的CSS
#rank-bar { margin: 1em 0 2em 0; } #rank-bar-score { display: inline-block; } #ranks-js { margin-bottom: 1.5em; } .rating-bar { width: 0; line-height: 2; background-color: #1a1a1a; outline: none; -moz-border-radius: 2px 0 0 2px; -webkit-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px; -moz-transition: background-color 0.5s linear 0s; -webkit-transition: background-color 0.5s linear 0s; transition: background-color 0.5s linear 0s; } .rating-bar-bg { width: auto; background-color: #1a1a1a; margin: 0.5em 0 0 1em; border: 1px solid #090909; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .rating-bar-bg-overall { width: auto; background-color: #1a1a1a; margin: 0.5em 0; border: 1px solid #090909; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .rb-label { width: 10em; max-width: 350px; display: block; color: #ebebeb; font-weight: bold; text-shadow: 2px 1px 0 #222222; text-transform: uppercase; margin-left: 0.5em; } #overall { font-size: 1.25em; }
的jsfiddle
编辑 ：我已经从小提琴添加了更新的CSS。
编辑2 ：举一个简单的例子，看看这个JSFiddle 。
另一种解决方法。
使用CSS完成动画，脚本只是为了处理何时停止。
脚本
var intervalFunc; var containerWidth; var stopAt; $(document).ready(function() { $("#run").click(function() { containerWidth = $("#container").width(); entered = $("#value").val(); stopAt = containerWidth * entered / 100; $("#test").removeClass ("animated"); intervalFunc = setInterval (Stop, 10); setTimeout (Start, 10); }); }) function Start () { $("#test").addClass ("animated"); $("#test").removeAttr("style"); } function Stop () { var elem = document.getElementById('test'); var style = window.getComputedStyle (elem, null); var frame = style.getPropertyValue("width"); var width = parseInt(frame,10); if (width > stopAt) { elem.style.webkitAnimationPlayState = "paused"; clearInterval (intervalFunc); } }
CSS
#container { position: absolute; height: 50px; width: 300px; border: solid 1px black; display: block; top: 40px; } #test { position: absolute; height: 100%; width: 0px; display: block; top: 0px; left: 0px; } .animated { -webkit-animation-name: colors; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } #run { width: 40px; height: 25px; } @-webkit-keyframes colors { 0% {width: 0%; background-color: red;} 30% { background-color: red;} 50% { background-color: yellow;} 100% {width: 100%; background-color: green;} }
演示
在演示中，输入条的百分比，然后按运行。
只有webkit动画，但应该很容易扩展到其他浏览器。
颜色停止只是近似，但也可以很容易地修改。