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

在回调时更改进度条的颜色

1 个答案: