为什么我的jQuery脚本会产生双fadeIn？

Question

我正在尝试使用.fadeIn()来使我的导航悬停效果在过渡时看起来更平滑.除了我得到的东西,我只能描述为双重淡入淡出(进出,然后重新进入).

我是JS和jQuery API的新手,所以任何帮助都值得赞赏.我是CSS的老专家,所以我仍然用这些术语来思考.在这一个我添加一个类来切换背景精灵bg位置.我的jQuery,我的CSS或两者都有问题吗？

http://tuscaroratackle.com是有问题的实例 - 导航链接.

Answer 1

而不是mouseout和mouseover其火,甚至进入了一个孩子的时候,你可以用.hover(),像这样:

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

.hover()映射到进入/离开子项时不会触发的事件mouseenter和mouseleave事件,这是导致当前代码中出现双重动画的原因.

与问题没有直接关系,但是你想要解决的页面上还有一些其他问题,包括jQuery(最新的1.4.x),然后jQuery 1.2.6随后将包含1.5.1版的验证插件(现在高达1.7).我会考虑升级你的验证插件并删除jQuery 1.2.6 include,因为它可能会让你后来感到头痛(现在用户的页面更重).