how to animate with CSS?

Question

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

One of the advantages of jQuery is that it is chain-able. $('span#' + talker).alterClass(x, y).delay(100).alterClass(x, y)..... — Derek 朕會功夫
– Derek 朕會功夫, Commented Mar 28, 2013 at 4:03
@Derek - .delay() only works with methods that use the animation queue so it probably doesn't work with .alterClass(). — jfriend00
– jfriend00, Commented Mar 28, 2013 at 5:07

jfriend00 · Accepted Answer · 2013-03-28 13:42:29Z

1

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.

edited Mar 28, 2013 at 13:42

answered Mar 28, 2013 at 4:53

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1595858 Over a year ago

should we call next() somewhere in the code? It is not going insdie the next() right now.

user1595858 Over a year ago

i haved added next() at the end to execute that function. Now it is working fine.

Collectives™ on Stack Overflow

how to animate with CSS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related