带有颜色过渡jquery的进度条？

Question

您好，我正在尝试创建一个进度条，在点击事件时它会减少百分比（带有一个小动画）并将其颜色从绿色变为红色。 所以第一种颜色是 100% 的绿色。如果我按一次，宽度应该是 99%，颜色会更红一点。这应该一直持续到内部进度条的宽度为 1% 并且颜色为 100% 红色。

这可能吗？或者我必须设置一些颜色更改为另一种颜色的限制？我只会使用 jquery 和 jquery mobile。 (没有 jquery-ui)

到目前为止我有这个：

css:
#battery{
    height: 100%;
    margin-left: 2%;
    margin-top: 1%;
    border-color: black;
    border-style: solid;
}

#battery-inner{
    background:green;
    height: 100%;
    float: right;
    width: 100%;
}

js（包含在所需的 onclick() 函数中）：

$bar.css("width", 100 * parseFloat($bar.css('width')) / parseFloat($bar.parent().css('width')) -10 + '%');

我希望颜色与此示例中的颜色相同（红色一侧，黄色中间，绿色另一侧）

http://www.cssflow.com/snippets/animated-progress-bar/demo

到目前为止它可以工作，但它没有任何动画，也没有颜色变化......

Answer 1

FIDDLE

这在 jQuery 中使用 a small slider plugin I wrote，但应该让您很好地了解如何实现。

诀窍是简单地计算出进度条的 % 值，然后将其应用于 RGB 颜色，反向应用于 RED 分量，逐渐应用于 GREEN。

HTML

<div id='slider' class='sliderBar'></div>
<button>Remove 10%</button>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#slider {
    height:20px;
    max-height:20px;
}
.sliderBar-progress {
    background:rgb(0, 255, 0);
}

jQuery

$('#slider').sliderBar({
    start: 100,
    onChange: function (val) {
        var red = 0,
            green = 0;
        if (val >= 50) {
            red = 255 - Math.round(((val - 50) / 50) * 255);
            green = 255;
        } else {
            red = 255;
            green = Math.round(((val) / 50) * 255);

        }
        $('.sliderBar-progress').css({
            background: "rgb(" + red + "," + green + ",0)"
        });
    }
});

$('button').on('click', function () {
    $('#slider').setsliderBar($('#slider').getsliderBar()-10, true);
});