如何使用 jQuery 为我的导航项添加淡入悬停效果？

发布于 2024-09-15 12:44:16 字数 367 浏览 12 评论 0原文

我对 jQuery（以及一般的 JS）是全新的，我知道可以使用它为我的导航滚动添加淡入淡出效果。

现在，我正在为导航使用主背景精灵，并且在 :hover 上，我只是添加一个背景位置规则来将每个项目的精灵向下移动以获得悬停效果。

但我想使用 jQuery 来平滑过渡到翻转效果。我用谷歌搜索并找到了一些类似的信息，但我发现的大部分内容涉及有两张图像并淡出一张以显示另一张的情况。但我使用 CSS 背景位置来简单地将图像向下移动。我可以用 jQuery 让这个更平滑吗？如何做？

这是网站：http://tuscaroratackle.com

原文

分享到QQ

分享到微博

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

发布评论

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

韵柒 2024-09-22 12:44:17

第 100 个示例中的 1 个示例

在标签中添加

一个元素，并从 CSS 背景样式类中应用“span.bg1”和“a:hover span.bg2（当为 :hover 时）”

jquery

 $(文档).ready(function(){
    $("ul#nav li").each(function(){
        $(this).鼠标悬停(函数(){


                $(this).find("a span.bg1").fadeOut() ;
                $(this).find("a span.bg2").fadein() ;


        });

    });

});



 $(文档).ready(函数(){
    $("ul#nav li").each(function(){
        $(this).鼠标悬停(函数(){


                $(this).find("a").addClass("bg1").fadeOut() ;
                $(this).find("a").fadeIn();


        });

    });

});

当鼠标移出改变背景时也是如此，它不是可供使用的代码，甚至没有经过测试，但它是为您提供一个想法

您可以使用任何效果来代替淡入淡出！

PS：但我认为 :hover 效果对用户更友好，而且看起来也不错:)

1 example from 100-Th

Add in

tag a element , and apply from CSS background style class for the "span.bg1" and "a:hover span.bg2 (when it is :hover)"

 <li class="nav-link " id="rods">
      <a href="/rods">
      <span class="bg1">Rods</span>
      <span class="bg2" style="display:none;">Rods</span>
      </a>

  </li>

jquery

    $(document).ready(function(){
    $("ul#nav li").each(function(){
        $(this).mouseover(function(){


                $(this).find("a span.bg1").fadeOut() ;
                $(this).find("a span.bg2").fadein() ;


        });

    });

});



 $(document).ready(function(){
    $("ul#nav li").each(function(){
        $(this).mouseover(function(){


                $(this).find("a").addClass("bg1").fadeOut() ;
                $(this).find("a").fadeIn();


        });

    });

});

and the same thing when mouse is out to change back background, it is not a code ready to use, it even wasn't tested , but it is for an idea for you

instead fade you can use any effect !

P.S. : But I think just :hover effect is more user friendly and doesn't look bad :)

回复收藏 0 原文

~没有更多了~