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

Question

我是 jQuery（和一般的 JS）的新手，我知道可以使用它为我的导航翻转添加淡入效果。

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

但我想使用 jQuery 为翻转效果带来平滑过渡。我用谷歌搜索了它并找到了一些类似的信息，但我发现的大部分内容都是处理你有两张图像并淡出其中一张以显示另一张的情况。但我使用 CSS background-position 来简单地将图像向下移动。我可以用 jQuery 更流畅地做到这一点吗？如何？

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

Answer 1

100-Th 中的 1 个示例

添加

标记一个元素，并从 CSS 背景样式类应用“span.bg1”和“a:hover span.bg2（当它是: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();


        });

    });

});

同样的，当鼠标移出背景时，它不是一个可以使用的代码，它甚至没有经过测试，但它是给你的一个想法

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

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