回调时更改进度条的颜色

Question

我有一个进度条：

<progress id="communicationProgress" value="0" max="100"></progress>

我使用 jquery 对其进行动画处理：

var progress = function (name, duration, value, easing, callback) {
    $(name).val(0).animate(
        { value: value },
        { duration: duration,
            easing: easing,
            complete: function () {
                if (callback) {

                }
            }
        }
    );
};

这是动画期间使用的颜色值的 css：

#skills span {
    top: -30px;
    left: 2%;
    position: relative;
    font-size: 1.4em;
    font-weight: bolder;
    font-family: monospace;
    color: #fff;
}

progress {
    background-color: #f3f3f3;
    border: 0;
    height: 2.5em;
    width: 100%;
}

progress::-webkit-progress-bar {
    background-color: #e0eaf0;
}

progress::-webkit-progress-value {
    background-color: #329ad1;
}

progress::-moz-progress-bar {
    background-color: #329ad1;
}

我想在回调时更改状态栏的颜色。我试过浏览 jquery 文档，但不知道如何更改颜色。

Answer 1

有关 HTML5 的进展，您可以查看

https://css-tricks.com/html5-progress-element/

它展示了如何改变进度元素的样式。如果您在进度条类（例如progressbar.red）上创建了正确的样式，您可以为每种颜色添加一个类到css，然后使用jquery的addClass方法删除/添加一个颜色类