Jquery, Background color transition loop

Question

Hey there,

I am looking to animate the background-color so it cycles through varios predefined colors in an endless loop.

I am not a programmer and new to jquery, if someone could help me figure this out I would really appreciate ist

thx!

Answer 1

window.setInterval('functionToChangeColour()', 5000); This will run your function every 5000 milliseconds changing the colour the way you'd like it to change.

You can assign an object var obj = setInterval('functionToChangeColour()', 5000); to then later clear the interval if you like using window.clearInterval(obj)

Regards, Byron Cobb

Answer 2

Building on Byron's solution and making use of the color animations plugin:

// The array of colours and current index within the colour array
// This array can be hex values or named colours
var colours = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
var currIndex = 0;

// The element to animage the background-color of
var elem = $('#element-id');

// Infinitely animate the background-color of your element every second
var loop = setInterval(function(){
    elem.animate({backgroundColor: colours[currIndex++]});

    // Set the current index in the colour array, making sure to loop
    // back to beginning once last colour is reached
    currIndex = currIndex == colours.length ? 0 : currIndex;
}, 1000);

You can see it in action here.