Question

So I guess this is mostly that I don’t know how to word this to Google it, but basically I’m trying to build a menu that uses a different hover background color for each menu item. I have this so far:

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

I want to replace ‘#f00’ with a different value based on which menu item is selected. I know I could write a different method for each item using :eq, but if there is a more condensed way to do it, that would be preferred. I was thinking like an array of color values, then the function would substitute the number of the instance with array[number of instance]. Hopefully that makes sense…

Answer 1

Something like this should work:

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

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

$(this).index() returns the index of the current element relative to its parent.

---

A slightly cleaner approach would be with data attributes:

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