Question

I am using the following script (which depends on jQuery UI) to animate the changing of the background colour of a DIV using the CSS below. You can see it in action on this page – it changes the colour in the doorway of the logo (you have to wait 10 secs to see a noticeable change). The transitions work fine apart from the change from the 5th colour back to the 1st which is a sudden change (i.e. no fade transition). I wonder if it would be possible to alter the script below to get this transition working too?

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

Here’s the code that works for me:

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