为什么我的 jQuery 脚本会产生双重淡入？

发布于 2024-09-16 05:03:27 字数 316 浏览 9 评论 0 原文

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

我对 JS 和 jQuery API 很陌生，所以非常感谢您的帮助。我是 CSS 的老专家了，所以我仍然用这些术语来思考。在这个例子中，我添加了一个类来向下切换背景精灵的背景位置。是我的 jQuery、CSS 或两者都有问题吗？

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

彻夜缠绵 2024-09-23 05:03:27

您可以使用 mouseout 和 mouseover 即使在进入子项时也会触发。 com/hover/" rel="noreferrer">.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 包含，因为它可能会让您以后感到头疼（现在对用户来说页面会更重）。

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).

回复收藏 0 原文

凉月流沐 2024-09-23 05:03:27

你可能想这样做，

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

我在视图上隐藏 a ，然后它将在悬停时显示。

您还可以为 hover 类设置 display:none ，这样您就不必在其中调用 .hide() 。

这是一个演示

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

回复收藏 0 原文

~没有更多了~