Question

I have tried to find some decent documentation on traversing in jQuery, but have not found a decent resource, any suggestions would be much appreciated.

I am trying to create a simple animation for a menu.

I have a simple menu:

<ul class='contentNav'>
 <li><a href='#'>One</a>
 <li><a href='#'>Two</a>
 <li><a href='#'>Three</a>
 <li><a href='#'>Four</a>
</ul>

And a simple jquery function to change the background color of the tag:

$(document).ready(function(){

   $(".contentNav a").hoverIntent(
   function(over) {
     $(this).animate({backgroundColor: "#844"}, "fast");
     $(this).parent().find("li a").animate({backgroundColor: "#090"}, "fast");
   },
   function(out) {
     $(this).animate({backgroundColor: "#000"}, "fast");
     $(this).parent().find("li a").animate({backgroundColor: "#000"}, "fast");
   });
}); 

The trouble is with the lines:

$(this).parent().find("li a").animate({backgroundColor: "#090"}, "fast"); 
$(this).parent().find("li a").animate({backgroundColor: "#000"}, "fast");

I am trying to select all of the link tag items that are not currently hovered over and set their background color. How do I do this.

Thanks.

---

UPDATE

---

I have taken all of the recommendations and come up with the following code:

$(this).parent().parent().find("a").not(this).animate({backgroundcolor: "#555"}, 100)

Answer 1

From the hoverIntent docs, the hoverIntent call takes a configuration object, not two methods. Try this:

$(document).ready(function(){
  $(".contentNav a").hoverIntent({
    over: function() {
      $(this).animate({backgroundColor: "#844"}, "fast");
      $(this).parent().parent().find("li a").not(this).animate({backgroundColor: "#090"}, "fast");
    },
    out: function() {
      $(this).parent().parent().find("li a").animate({backgroundColor: "#090"}, "fast");
    }
  });
});

Hat tip to richsage for his answer, which identified the grandparent problem.
And another to Vertigo for the idea to use the temporary class and not.