Анимировать цвет фона с помощью цикла по массиву [jQuery]

Question

Анимировать цвет фона с помощью цикла по массиву [jQuery]

0

Я пытаюсь создать что-то простое.

Когда вы наводите курсор на 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 поэтому каждый из них перемещается вверх по массиву.

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

Arun P Johny 02 апр. 2014, в 13:30

Источник

Теги:

javascript

jquery

arrays

for-loop

1 ответ

Ещё вопросы

Arun P Johny · Answer 1 · 2014-04-02T08-03-00.000Z

Используйте индекс, подобный

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

Демо: скрипка