jquery - 需要调整 jQuery 颜色动画脚本以添加从最终颜色到序列中第一个颜色的过渡

Question

我正在使用以下脚本（取决于 jQuery UI）使用下面的 CSS 为 DIV 的背景颜色变化设置动画。您可以在此页面上看到它的实际效果 - 它改变了徽标门口的颜色（您必须等待 10 秒才能看到明显的变化）。除了从第 5 种颜色到第 1 种颜色的突然变化（即没有淡入淡出过渡）之外，过渡效果很好。我想知道是否可以更改下面的脚本以使这种过渡也起作用？

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

    if(curNumber > 5){
        curNumber = 1;
    }
    console.log(curNumber);
    element.addClass('color' + curNumber, 2000);
    // So previous classes get removed.
    element.attr('class', 'color' + curNumber);
    setTimeout(function(){changeColor(element, curNumber)}, 10000);  
}

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

CSS

.color1{
    background:#FDFBFB;
}

.color2{
    background: #BDF0F5;
}

.color3{
    background: #E5F5BD;
}

.color4{
    background: #D4D1F5;
}

.color5{
    background: #F5EAD0;
}​

Answer 1

这是对我有用的代码：

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

    if(curNumber > 5) {
        // we are back at 1, animate removeClass instead
        curNumber = 1;

        // we don't need animation here since color5 is defined AFTER color1, (cascading)
        element.addClass('color' + curNumber);

        // we animate removeClass instead
        element.removeClass('color' + 5, 2000);
    } else {
        element.addClass('color' + curNumber, 2000);
        // So previous classes get removed.
        element.attr('class', 'color' + curNumber);
    }
    console.log(curNumber);
    setTimeout(function(){changeColor(element, curNumber)}, 10000);  
}​