Question

http://jsfiddle.net/JamesKyle/re73T/

Trying to make a class switcher that will do the following:

1. On Load – randomly select one of 10 classes to add to an element
2. While Hovering – Rapidly (every 0.4s) switch between 10 classes
3. On mouseOut – leave the current class active

I’ve tried several ways of doing this, none of which have worked.

What do you think would be the best way to do this?

Answer 1

Here’s a different implementation that works in your jsFiddle here: http://jsfiddle.net/jfriend00/b7A4a/. This one also makes sure that the randomly generated class name is different than the previous one so the color actually changes every 400ms rather than skipping a change 1 out of 10 times because it generates the same color value that it just had.

// get unique random class that's different than what is currently being used
function getRandomClass(prior) {
    var r;
    do {
        r = "class" + (Math.floor(Math.random() * 10) + 1); 
    } while (prior && prior.match(new RegExp("\\b" + r + "\\b")));
    return(r);
}

// initialize the current class
$(".element").addClass(getRandomClass());

// upon hover, start the timer, when leaving stop the timer
$(".element").hover(function() {
    var self = this;
    if (this.intervalTimer) {
        clearInterval(this.intervalTimer);
        this.intervalTimer = null;
    }
    this.intervalTimer = setInterval(function() {
        var c = self.className;
        self.className = c.replace(/\bclass\d+\b/, getRandomClass(c));
    }, 400);
}, function() {
    clearInterval(this.intervalTimer);
    this.intervalTimer = null;
});