Question

我正致力于音频会议项目，以便在所有最新的浏览器上工作。谁曾在麦克风上讲话，将在服务器上生成一个事件并在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')相同;参考：alterClass

Answer 1

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

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();
}

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

如何用CSS动画？

1 个答案: