通过遍历数组来动画背景色[jQuery]

Question

I'm trying to create something simple.

When you hover over ul , the background changes colour to the first item in the array. Next time you hover over ul , the background changes to the second colour in the array.

JSFIDDLE

var col = ['red', 'blue', 'green'];

    $('ul').hover(function(){
        $('.container').animate({backgroundColor: 'red'});
    }, function(){
       $('.container').animate({backgroundColor: 'none'});
    });

The following loop takes each colour and writes it to the console. However, I'm not sure how to marry the for loop with the hover — so each over moves up the array .

for (i=0; i<col.length;i++){
    console.log(col[i]);
}

Answer 1

Use an index like

var col = ['red', 'blue', 'green'],
    index = 0;

$('ul').hover(function () {
    $('.container').stop(true).animate({
        backgroundColor: col[index++ % col.length]
    });
}, function () {
    $('.container').stop(true).animate({
        backgroundColor: 'none'
    });
});

Demo: Fiddle