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

Question

我正在使用以下脚本(取决于 jQuery UI)使用下面的 CSS 为 DIV 的背景颜色的变化设置动画。您可以在 this page 上看到它的实际效果- 它改变了标志门口的颜色(你必须等待 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);  
}​