jQuery проверка номер на инстанция - jquery

Предполагам, че това е най-вече това, което не знам какда го кажа на Google, но всъщност аз се опитвам да създам меню, което използва различен цвят на фона за всеки елемент от менюто.

$(function() {
$("li").hover(function() {
$(this).animate({backgroundColor:"#f00"},200);
}, function() {
$(this).animate({backgroundColor:"#eee"},200);
});
});

Искам да заменя "# f00" с различна стойноствъз основа на кой елемент от менюто е избран. Знам, че бих могъл да напиша различен метод за всеки елемент, използвайки: eq, но ако има по-кондензиран начин да го направя, това би било предпочитано. Мислех като масив от цветови стойности, след което функцията би заместила номера на инстанцията с масив [брой на случая]. Надяваме се, че има смисъл ...

Отговори:

Нещо подобно трябва да работи:

$(function() {
var colors = ["#FFF", "#GGG", ...];

$("li").hover(function() {
$(this).animate({backgroundColor: colors[$(this).index()]}, 200);
}, function() {
$(this).animate({backgroundColor: "#eee"},200);
});
});

$(this).index() връща индекса на текущия елемент спрямо неговия родител.

Малко по-чист подход би бил data атрибути:

HTML:

<li data-hover="#FFF">...</li>
<li data-hover="#GGG">...</li>

JS:

$(function() {
$("li").hover(function() {
$(this).animate({backgroundColor: $(this).data("hover")}, 200);
}, function() {
$(this).animate({backgroundColor: "#eee"},200);
});
});