JQuery: Moving Problems
I tried to find some decent documentation for going through jQuery but couldn't find 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 a 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 problem with 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 link tag tags that are not currently hovering and setting their background color. How should I do it.
Thank.
UPDATE
I accepted all the recommendations and came up with the following code:
$(this).parent().parent().find("a").not(this).animate({backgroundcolor: "#555"}, 100)
source to share
From the hoverIntent docs, the hoverIntent call takes a config object, not two methods. Try the following:
$(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");
}
});
});
Chat tip for richsage for his answer that identified the grandparents problem. And one more for Vertigo for the idea to use a temporary class and not
.
source to share
Your lines are missing an extra parent:
$(this).parent().parent().find("li a").animate({backgroundColor: "#090"}, "fast");
$(this).parent().parent().find("li a").animate({backgroundColor: "#000"}, "fast");
Since your initial selector is in the 'a' tag, you want to go once to the 'li' tag and then again to the containing div if you want to use the find ("li a") selector.
source to share
If you want to select everything except the hovering element, you can do something like this:
// first add class to hovered element when hovering over
$(this).addClass("hovered");
// then select all but that one
$(this).parent().parent().find("li a").not(".hovered").animate({backgroundColor: "#090"}, "fast");
// and remember to remove class when hovering out
$(this).removeClass("hovered");
source to share
Vertigo's idea of using a temp class should work to select everything except the hovered element (+1 for that).
However, another way that should also work is to use the filter () method and compare the instances of the dom elements. This approach may be slightly faster than adding and removing class names, but if there is a performance difference, it is probably very small.
$(document).ready(function(){
$(".contentNav a").hoverIntent(
function(over) {
var current = this;
$(this).animate({backgroundColor: "#844"}, "fast");
$(this).parent().parent()
.find("li a")
.filter(function() { return this !== current; })
.animate({backgroundColor: "#090"}, "fast");
},
function(out) {
var current = this;
$(this).animate({backgroundColor: "#000"}, "fast");
$(this).parent().parent()
.find("li a")
.filter(function() { return this !== current; })
.animate({backgroundColor: "#000"}, "fast");
});
});
source to share