Why is my jQuery script creating a double fadeIn?

Question

I am trying to use .fadeIn () so that my navigation hover effects look a little smoother on transition. In addition, I get what I can only describe as double attenuation (inside and out and back).

I am new to JS and the jQuery API, so any help is appreciated. I am an old professional with CSS, so I still think in these terms. On this, I add a class to switch the bg position of the background sprite down. Is the problem with my jQuery, my CSS, or both?

http://tuscaroratackle.com is an instance under review - navigation links.

Answer 1

Instead of mouseoutand mouseover, which fire even when you enter a child, you can use .hover(), for example:

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

.hover()displays events mouseenterand mouseleavethat do not work when entering / exiting from them, which is what causes double animation in your current code.

---

It is not directly related to the question, but on the page you want to indicate some other problems, it is included in jQuery (the latest 1.4.x), then jQuery 1.2.6 is included later with version 1.5.1 the validation plugin ( which is now up to 1.7) . I would look at updating the validation plugin and removing jQuery 1.2.6, as this can cause headaches later (and a heavier page for users now).

Answer 2

,

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

a , .

display:none hover, .hide() .