jQuery - Animate backgroundColor，取决于宽度百分比 [英] jQuery - Animate backgroundColor, depending on width percentage

问题描述

我正在为我的设备规格页面构建排名/评分栏，我有一个使用转换和动画的基本动画在一起，但最终的结果不是我的后面。对于你的诠释，CSS代码留在原地（ animation 属性被禁用），这是目前的情况 - 同样的事情JSFiddle 。

I'm in the process of constructing rank/score bars for my device spec pages, and I have a basic animation using transition and animation together, but the end result isn't quite what I'm after. For your delectation, the CSS code is left in place (with the animation properties disabled), and this is currently how it stands - JSFiddle of the same thing.

A我的前一个问题是获取动画的工作，取决于酒吧的百分比，我目前使用的方法是从该问题中选择的答案。不幸的是，最终结果虽然很好，但不提供我原来的功能。

A previous question of mine was to get the animation working, depending on the percentage of the bar, and the method I'm currently using is from the selected answer in that question. Unfortunately, the end result, while nice, doesn't provide the functionality I was originally after.

例如，目前的情况是，提供特定的背景颜色页面加载，然后过渡播放通过。

For example, as it currently is, the specific background color is provided when the page loads, and then the transition plays through.

我最理想的是，当你动画属性在我的CSS中启用，但同样，它有自己的问题。它更接近我的目标，但不是解决方案。

What I was ideally after, is the result you get when the animation properties are enabled in my CSS, but again, that has problems of its own. It's closer to my target, but not the solution.

我在找的是这样的东西（希望我已经解释了这么好）。

What I'm looking for is something like this (hopefully I have explained this well enough). All of these changes to the background color should happen while the transition (for the width) is happening.

• 当<$ c时，所有这些对背景颜色的更改都会发生。 $ c> width 等于0％到24％，背景颜色应该是红色，因此条形将以红色开始 - ＃a41818

• When width equals 0% to 24%, the background color should be red, and so the bars will start off as red - #a41818

如果 width 等于25％至49％，背景颜色应从红色渐变为橙色 - ＃87581c

If width equals 25% to 49%, the background color should fade from red to orange - #87581c

如果 width 等于50 ％到74％，背景颜色应从橙色淡黄色 - ＃997815

If width equals 50% to 74%, the background color should fade from orange to yellow - #997815

code> width 等于75％至89％，背景颜色应从黄色渐变为greenyellow - ＃659a1f

If width equals 75% to 89%, the background color should fade from yellow to greenyellow - #659a1f

如果 width 等于25％至49％，背景颜色应从绿色渐变为绿色 - ＃3a8d24

If width equals 25% to 49%, the background color should fade from greenyellow to green - #3a8d24

此外，如果宽度恰好保持在特定百分比，例如56％，则条背景颜色应当保持在相应于其百分比范围的颜色。在这种情况下，56％将是黄色的。如果栏宽为12％，颜色应该保持红色等。

And also, if the width happens to stay at a specific percentage, such as 56%, for example, then the bar background color should stay at the color respective to its percentage range. In this case, 56% would be yellow. If the bar width is 12%, the color should stay red, etc.

如果您需要更多详细信息，或者如果您需要进一步澄清，请告诉我。

Please do let me know if you need more detail, or if you need further clarification with anything.

谢谢！

推荐答案

如果我理解正确，想根据你在动画时的百分比来动画颜色。这是正确的吗？

If I understand correctly, you just want to animate colors based on what percent you're at when animating. Is this correct?

如果是这样，并根据您提供的示例，我建议查看jQuery的 animate 函数，并使用步骤回调来检查动画中的每一步。

If so, and based on what you've provided with your example, I'd recommend looking into jQuery's animate function and using the step callback to check every step of the way in the animation.

这里是我迄今为止已经实验的css和jquery的组合。我很想看到一个完整的CSS示例！

Here is what I've experimented with so far with both css and jquery combined. I'd love to see a full css example!

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

EDIT

EDIT 2 ：有关简单示例，请参阅 JSFiddle 。

EDIT 2: For a simple example, see this JSFiddle.

这篇关于jQuery - Animate backgroundColor，取决于宽度百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！