javascript - 回调时改变进度条的颜色

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 方法删除/添加一个颜色类