如何使用jQuery向导航项目添加淡入悬停效果？

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

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

但是我想使用jQuery来平滑过渡到滚动效果。我在谷歌上搜索了一下，发现了一些类似的信息，但我发现的大部分都是关于你有两张图片，一张淡出另一张的例子。但我使用CSS背景位置来简单地向下移动图像。我可以用jQuery更流畅地完成这项工作吗？如何做到

---

以下是网站：

100街的一个例子

添加

标记元素，并从CSS背景样式类应用于“span.bg1”和“a:hover span.bg2（当它是：hover时）”

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

相反，你可以使用任何效果

---

附言：但我认为：悬停效果更为用户友好，看起来也不错：）

那篇文章虽然很有帮助，但通过设置背景图像的动画效果更好，而我正试图将其设置为fadein/fadeout.Nice，但是有没有办法不在标记中添加额外的跨距？如果可能的话，我更愿意不复制标记，为非js甚至非css用户提供优雅的降级体验。是的，更改gust类，并应用为您保存的fadeIn和fadeOutI另一个示例，您可以为淡入效果添加一些延迟。好的，我想我就快到了。这有点奏效——除非你现在看它，你会看到效果出现了，然后淡入淡出，而不是在悬停时淡入淡出。

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

  </li>

    $(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();


        });

    });

});