3

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

我是 JS 和 jQuery API 的新手，所以任何帮助表示赞赏。我是 CSS 的老专家，所以我仍然认为这些术语。在这个上，我添加了一个类来切换背景精灵 bg 位置。是我的 jQuery、我的 CSS 还是两者都有问题？

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

4

2 回答 2

7

代替mouseoutand mouseoverwhich fire even when enter a child，您可以使用.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 包含，因为它可能会在以后让您头疼（并且现在用户的页面更重）。

于 2010-08-26T02:48:57.750 回答
1

你可能想这样做，

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

我隐藏a在它上面，然后它会在悬停时显示。

你也可以设置display:none上课hover，这样你就不必.hide()在那里打电话了。

这是一个演示

于 2010-08-26T03:02:05.633 回答