CODEWITHSUNDEEP
javascriptjquerycsshtml
user1595858
user1595858

Reputation: 3878

how to animate with CSS?

I am working on audio conference project to work on all the latest browsers. Who ever talks on the mic, will generate a event at the server and calls a function(whoIsTalking()) in javascripts. I am replacing the CSS to animate such that the volume raises by switching the css(in turn switches the background pics) as needed. But the javascript runs so fast that i don't see any change in css. I need the volume raise and lows when the speaker is speaking. Can anyone help me on this?

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

Note: alterClass('x','y') is same as removeClass('x').addClass('y'); ref : alterClass

Upvotes: 0

Views: 105

Answers (1)

jfriend00
jfriend00

Reputation: 707158

You can use a timer to adjust the timing of your class changes so they are spaced out a predictable amount of time:

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

This also uses an array of volume names to avoid repeating lots of code and names.

Upvotes: 1

Related Questions