Why is my jQuery script producing a double fadeIn?

Question

I'm trying to use .fadeIn() to make my navigational hover effects look a little more smooth on the transition. Except I'm getting what I can only describe as a double fade (in and out and back in again).

I'm brand new to JS and the jQuery API so any help appreciated. I'm an old pro with CSS, so I still think in those terms. On this one I'm adding a class to switch the background sprite bg-position down. Is the problem with my jQuery, my CSS or both?

http://tuscaroratackle.com is the instance in question - the nav links.

Answer 1

Instead of mouseout and mouseover which fire even when entering a child, you can use .hover(), like this:

$("#nav li").hover(function(){
  $(this).find("a").addClass("hover").fadeIn();
}, function(){
  $(this).find("a").removeClass("hover").fadeOut();
});

.hover() maps to the mouseenter and mouseleave events which don't fire when entering/leaving children, which is what's causing the double animation in your current code.

---

Not directly related to the question but there are some other issues on the page you'll want to address, jQuery is included (the latest 1.4.x) then jQuery 1.2.6 is included later with version 1.5.1 of the validation plugin (which is up to 1.7 now). I'd look at upgrading your validation plugin and removing the jQuery 1.2.6 include, as it's likely to cause you headaches later (and a heavier page for users now).

Answer 2

you may want to do it this way,

$("#nav li").hover(function(){    
    $(this).find("a").fadeIn();
},
function(){
    $(this).find("a").fadeOut();
}).find("a").addClass("hover").hide();

I hide a on it on view, it will then be showed on hover.

you can also set display:none for hover class so that you don't have to call .hide() in there.

here's a demo