Question

I was hoping someone could show me efficient JQuery to animate between 4 background colors in a div class.

I would like these events to be triggered by time, not click or hover. I’ve seen posts on hover and toggle, but as someone not very proficient in JQuery, I didn’t feel comfortable copying and pasting parts here and there.

Thank you

Answer 1

I dont know if you mean animated as in fading to the next, but heres a simple quick example of changing the color every 2 seconds. First example does not require 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);

Update animating color

Second example requires Jquery UI if you wish to fade between classes or background colors.

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