Question

我试图创造简单的东西。

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

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

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

以下循环采用每种颜色并将其写入控制台。但是，我不确定如何结合for loop with the hover - ，以便每个人都向上移动数组。

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

演示：Fiddle

通过循环数组[jQuery]动画背景颜色

1 个答案: