Javascript jQuery-根据宽度百分比设置背景颜色动画

我正在为我的设备规范页面构建排名/得分栏，我有一个基本的动画，同时使用

transition

和

animation

，但最终结果并不是我想要的。为了让您愉快，CSS代码保留在原来的位置（禁用

动画

属性），并且-

是为了让动画正常工作，这取决于条的百分比，而我当前使用的方法是根据该问题中选定的答案。不幸的是，最终结果虽然很好，但并没有提供我最初想要的功能

例如，目前的情况是，页面加载时会提供特定的背景色，然后过渡会一直播放

理想情况下，我所追求的是在我的CSS中启用

动画

属性时得到的结果，但这本身也有问题。它更接近我的目标，但不是解决方案

我想要的是这样的东西（希望我解释得足够好）。所有这些对背景色的更改都应该在过渡（宽度）发生时发生

• 当

  width

  等于0%到24%时，背景色应为红色，因此条形图将以红色开始

• 如果

  width

  等于25%到49%，则背景色应从红色变为橙色-

  87581c

• 如果

  width

  等于50%到74%，背景色应该从橙色变为黄色-

  997815

• 如果

  width

  等于75%到89%，则背景色应从黄色变为绿黄色-

  659a1f

• 如果

  width

  等于25%到49%，则背景色应从绿黄色变为绿色-

  3a8d24

而且，如果宽度恰好保持在特定的百分比，例如56%，那么条背景颜色应该保持在与其百分比范围相应的颜色。在这种情况下，56%为黄色。如果条形宽度为12%，则颜色应保持红色，以此类推

如果你需要更多的细节，或者你需要进一步的澄清，请告诉我

---

谢谢

如果我理解正确，您只需要根据您在设置动画时的百分比设置颜色动画。这是正确的吗

如果是这样的话，并且根据您在示例中提供的内容，我建议查看jQuery的函数并使用

步骤
回调来检查动画中的每个步骤

以下是我迄今为止在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

编辑2：有关一个简单的示例，请参见此。
如果我理解正确，您只需要根据设置动画时的百分比设置颜色动画。这是正确的吗

如果是这样的话，并且根据您在示例中提供的内容，我建议查看jQuery的函数并使用
步骤
回调来检查动画中的每个步骤

以下是我迄今为止在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

编辑2：有关一个简单的示例，请参见此。
另一种解决方法

动画是用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

在演示中，输入条的百分比，然后按run

仅webkit动画，但应轻松扩展到其他浏览器

色块只是近似值，但也可以很容易地修改。
另一种解决方法

动画是用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

在演示中，输入条的百分比，然后按run

仅webkit动画，但应轻松扩展到其他浏览器

颜色停止点只是近似值，但也可以很容易地修改。
因此，条应该在到达最终颜色的过程中循环每种颜色？顺便说一句，和以前一样，请发布一个（或类似的现场演示）来显示您的代码当前的状态。问题是什么。难道你不能在CSS中为所需的开始（也许是结束？）颜色定义类，然后根据条形图的宽度在加载时分配这些类吗？@DavidThomas嗨，David，谢谢你的回答，非常感谢。在宽度过渡期间，颜色应循环使用，直到宽度停止在其指定值。当宽度停止时，颜色也应该停止，结束颜色与我上面给出的百分比范围相关。因此，如果条形图为95%，颜色确实会一直循环到绿色，但如果条形图仅为30%，颜色将停止在橙色（但仍会从红色变为橙色）因此，酒吧应该循环通过每一种颜色的方式，以最终的颜色？顺便说一句，和以前一样，请发布一个（或类似的现场演示）来显示您的代码当前的状态。问题是什么。难道你不能在CSS中为所需的开始（也许是结束？）颜色定义类，然后根据条形图的宽度在加载时分配这些类吗？@DavidThomas嗨，David，谢谢你的回答，非常感谢。在宽度过渡期间，颜色应循环使用，直到宽度停止在其指定值。当宽度停止时，颜色也应该停止，结束颜色与我上面给出的百分比范围相关。因此，如果条形图为95%，颜色确实会循环