需要调整jQuery Color Animation脚本以在序列中添加从最终颜色回到第一个颜色的过渡

Question

我使用以下脚本（取决于jQuery UI）来使用下面的CSS对DIV的背景颜色进行更改。您可以在此页面上看到它在此页面上 - 它更改徽标门口的颜色（您必须等待10秒才能看到明显的更改）。除了从第五颜色回到第一个颜色的变化，这是突然的变化（即没有淡出的过渡），过渡效果很好。我想知道是否可以更改下面的脚本以使此过渡也有效？

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