Javascript 如何使用CSS制作动画？

我正在进行音频会议项目，以在所有最新的浏览器上工作。谁在麦克风上讲话，谁将在服务器上生成一个事件，并在javascripts中调用一个函数（whoIsTalking（））。我正在替换CSS来制作动画，以便根据需要切换CSS（反过来切换背景图片）来提高音量。但是javascript运行得如此之快，以至于我看不到css中有任何变化。当演讲者讲话时，我需要提高音量和降低音量。有人能帮我吗

this.whoIsTalking = function (action, id, type) {
    if(_selfM.logging) {
        log.info("The current user who is " + action + " with id " + id + " , recieved from :" + type);
    }
    talker(id);
}
/**
 * Change class for talker
 *
 */
function talker(id) {
    if(_selfM.logging) log.debug('Now in the "talker" function');
    var talker = "talker_" + id;
    $('span#' + talker).alterClass('btn-volum*', 'btn-volume_low');
    console.log($('span#' + talker));
    $('span#' + talker).alterClass('btn-volum*', 'btn-volume_medium');
    $('span#' + talker).alterClass('btn-volum*', 'btn-volume_high');
    $('span#' + talker).alterClass('btn-volum*', 'btn-volume_medium');
    $('span#' + talker).alterClass('btn-volum*', 'btn-volume_low');
    $('span#' + talker).alterClass('btn-volum*', 'btn-volume');
}

---

注：

alterClass（'x'，'y'）

与

removeClass（'x'）相同。addClass（'y'）

；ref:

您可以使用计时器来调整课程更改的时间，以便将更改间隔为可预测的时间量：

function talker(id) {
    if(_selfM.logging) log.debug('Now in the "talker" function');
    var volumes = ["_low", "_medium", "_high", "_medium", "_low", ""];
    var item = $('#talker_' + id);
    var index = 0;
    function next() {
        var cls = item.attr("class");
        var match = cls.match(/(btn-volume.*?)[\s$]/);
        if (match) {
            item.removeClass(match[1]);
        }
        item.addClass("btn-volume" + volumes[index]);
        index++;
        // if still more to go, set timer for next class change
        if (index < volumes.length) {
            setTimeout(next, 500);
        }
    }
    // start the process
    next();
}

功能通话器（id）{
if（_selfM.logging）log.debug（'现在在“talker”函数中'）；
var交易量=[“低”、“中”、“高”、“中”、“低”、“低”]；
var项目=$（'谈话者'+id）；
var指数=0；
函数next（）{
var cls=项目属性（“类别”）；
var match=cls.match（/（btn卷。*？[\s$]/）；
如果（匹配）{
item.removeClass（匹配[1]）；
}
项目.添加类别（“btn卷”+卷[索引]）；
索引++；
//如果还有更多的事情要做，请为下一次换班设置计时器
如果（索引

---

这还使用了卷名数组，以避免重复大量代码和名称。

jQuery的优点之一是它可以链接

$（'span#'+talker）.alterClass（x，y）.delay（100）.alterClass（x，y）…

检查alterClass是否工作..@Derek-

.delay（）

仅适用于使用动画队列的方法，因此它可能不适用于

.alterClass（）

。我们应该在代码中的某个地方调用next（）吗？它现在不在next（）中。我在末尾添加了next（）来执行该函数。现在它运行良好。