javascript - jQuery - 动画背景颜色，取决于宽度百分比

Question

我正在为我的设备规范页面构建排名/得分条，我有一个使用 transition 和 animation 的基本动画，但结束结果不是我想要的。为了让您满意，CSS 代码保留在原位(禁用了 animation 属性)，并且 this is currently how it stands - JSFiddle of the same thing .

A previous question of mine是让动画工作，这取决于栏的百分比，我目前使用的方法来自该问题中的选定答案。不幸的是，最终结果虽然不错，但并没有提供我最初想要的功能。

例如，目前的情况是，在页面加载时提供特定的背景颜色，然后进行过渡。

我最理想的是在我的 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%，颜色应保持红色等。

如果您需要更多详细信息，或者需要进一步说明任何内容，请务必告诉我。

谢谢!

Answer 1

如果我理解正确的话，您只想根据动画时所处的百分比来动画颜色。这是正确的吗？

如果是这样，并且根据您在示例中提供的内容，我建议您查看 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

编辑:我已经从 fiddle 中添加了更新后的 css。

编辑 2:有关简单示例，请参见 JSFiddle .