jquery - 使用Timer JQuery更改背景颜色CSS

我希望有人可以向我展示高效的JQuery，以在div类中为4种背景色之间建立动画。

我希望这些事件是时间触发的，而不是单击或悬停。我曾经看到过有关悬停和切换的文章，但是作为一个不太精通JQuery的人，我在这里和那里复制和粘贴部分时感觉不舒服。

谢谢

最佳答案

我不知道您是说动画到淡入淡出，而是一个每2秒更改一次颜色的简单快速示例。第一个示例不需要jQuery。

Live Demo

function changeColor(curNumber){
    curNumber++;

    if(curNumber > 4){
        curNumber = 1;
    }
    document.body.setAttribute('class', 'color' + curNumber);
    setTimeout(function(){changeColor(curNumber)}, 2000);
}

changeColor(0);

更新动画颜色

第二个示例需要Jquery UI，如果您希望在类或背景颜色之间淡入淡出。

Demo 2

function changeColor(element, curNumber){
    curNumber++;

    if(curNumber > 4){
        curNumber = 1;
    }

    element.addClass('color' + curNumber, 1000);

    // So previous classes get removed.
    element.attr('class', 'color' + curNumber);

    setTimeout(function(){changeColor(element, curNumber)}, 2000);
}

changeColor($('#testElement'), 0);