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之后的版本中验证插件（which is up to 1.7 now）。我会考虑升级你的验证插件并删除jQuery 1.2.6 include，因为它可能会让你后来感到头痛（现在用户的页面更重）。

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()。

here's a demo

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

2 个答案: