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

Question

我正在尝试创建一些简单的东西。

当您将鼠标悬停在ul ，背景颜色会更改为数组中的第一项。 下次将鼠标悬停在ul ，背景将更改为数组中的第二种颜色。

JSFIDDLE

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

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

以下循环获取每种颜色并将其写入控制台。 但是，我不确定如何将for loop with the hover - 因此每个over都向上移动数组 。

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

Answer 1

使用类似的索引

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

演示： 小提琴