使用Timer JQuery更改背景颜色CSS

我不知道你是否意味着动画就像褪色到下一个,但这是一个简单的快速例子,每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);