在回調時更改進度條的顏色

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/

它顯示了如何更改progress元素的樣式。 如果您在一個進度條類（例如progressbar.red）上創建了正確的樣式，則可以為css添加每種顏色的類，然后使用jquery的addClass方法刪除/添加顏色類