SOLVED: problem making nav "on" states with jquery addClass

[codexterity]

Hey everyone,

I have this one-page site I’m working on; it’s my first real go at jQuery so I’m running into a lot of problems and learning a lot. Here it is live:

http://watercourse.spr0cket.com/

there’s a little nav in the top right, which has hover states that are controlled by this:

Code:

$(“#nav li”).not(“.on”).hover(function(){
$(this).animate({marginRight: “0”, opacity: “1.0”}, {queue: false}, {duration: 400});
}, function() {
$(this).animate({marginRight: “-52px”, opacity: “0.35”}, {queue: false}, {duration: 400});
});

That’s working just fine, and when you click one of the nav items (except for "assessment" which isn’t hooked up yet), a hidden div flies in with that content (this is a one-page site). At that point, the appropriate nav item is switched to its "on" state. The problem I’m having is that I then want that nav item to be "stuck" in its on position as long as its corresponding div is shown. To do this, I’m adding a class of "on" to that nav item when its div is shown, and removing that class when the div is hidden. That’s why I have the "not(‘.on’)" in the hover code above. The functions that have the addClass and removeClass are here:

Code:

function openAbout() {
$(“#about”).show(function(){
$(this).animate({right: “85px”}, 1500, function(){
$(“#about_content *”).animate({opacity: “1.0”}, 500);
}).css({“z-index”: 9999});
});
$(“#nav li.open_about”).animate({marginRight: “0”, opacity: “1.0”}, {queue: false}, {duration: 400}).addClass(“on”);
};

Code:

function closeAbout() {
$(“#about_content *”).animate({opacity: “0”}, 500, function() {
$(“#about”).animate({right: winWidth+”px”}, 1500).hide(function() {
$(this).hide().stop(); // firefox hack
$faders.css({opacity: “0.3”});
$(“#about_content *”).css({opacity: “0”});
});
});
$(“#nav li.open_about”).animate({marginRight: “-52px”, opacity: “0.35”}, {queue: false}, {duration: 400}).removeClass(“on”);
};

The problem is that after the nav item is in its on state, if you mouseover and mouseout on it, it goes back to its off state. I can see in firebug that the class is being added, but for some reason the hover function is not removing the "on" items from its result set. Anyways, if anybody has any insight, it would be greatly appreciated. Thanks everybody!

[akeenlabs]

Either you’ve already figured out the problem and fixed it, or I’m not able to reproduce the problem you’re seeing in Firefox 3.5, Safari 4.0 (PC) or IE 8. If you’re already fixed it, then good for you. Otherwise, what browser are you using?

[codexterity]

Yeah I just fixed it, sorta. Instead of controlling the styles for the hover in jquery, I just made an "on" class in my CSS and add and remove that class the the nav items at the appropriate times. I wasn’t able to get it to animate that effect, however. It adds the class immediately instead of animating the effect, but oh well. Thanks anyways, marking thread as solved, for now.

[Author]

Posts