jQuery 快速类切换器

Question

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

尝试制作一个将执行以下操作的类切换器：

1. 加载时 - 随机选择 10 个类中的一个添加到元素中
2. 悬停时 - 在 10 个类之间快速（每 0.4 秒）切换
3. 在 mouseOut 上 - 使当前类保持活动状态

我尝试了几种方法，但都没有奏效。

您认为最好的方法是什么？

Answer 1

http://jsfiddle.net/re73T/9/

// On Load
//     Randomly select 1 of 10 classes


function removeAllClasses() {
    var i;
    for (i = 0; i <= 10; i += 1) {
        $('.element').removeClass('class' + i);
    }
}

function setRandomClass() {
    var cls = "class"+Math.floor(Math.random() * (10 - 1 + 1) + 1);
    $('.element').addClass(cls);
}

$(document).ready(function() {
    removeAllClasses(); // just in case
    setRandomClass();
});

// While Hovering
//    every 0.4s 
//        switch to the next class out of ten
// I want it to leave the current class when you mouseout
var IS_HOVERING = false;
$('.element').hover(function() {
    IS_HOVERING = true;
}, function() {
    IS_HOVERING = false;
});

function onTimeout() {
    if (IS_HOVERING) {
        removeAllClasses();
        setRandomClass();
    }
    setTimeout(onTimeout, 400);
}

setTimeout(onTimeout, 400);

Answer 2

这里有一个在你的 jsFiddle 中工作的不同实现：http://jsfiddle.net/jfriend00/b7A4a/。这一个还确保随机生成的类名与前一个不同，因此颜色实际上每 400 毫秒更改一次，而不是跳过 10 次更改中的 1 次，因为它生成的颜色值与它刚刚具有的相同。

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