如何使用CSS进行动画制作？

Question

我正在开发音频会议项目，以处理所有最新的浏览器。谁在谈论麦克风，将在服务器上生成一个事件，并在JavaScript中调用一个函数（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(); 
} 

这也使用卷名称的数组，以避免重复批次的代码和名称。