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

Question

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

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

但我想使用 jQuery 来平滑过渡到翻转效果。我在谷歌上搜索了一下，发现了一些类似的信息，但我发现的大部分内容都是关于你有两张图片并将一张淡出以显示另一张的情况。但我正在使用 CSS background-position 来简单地将图像向下移动。我可以使用 jQuery 更流畅地完成这项工作吗？如何做？

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

Answer 1

100-Th 中的 1 个例子

在

元素中加入标签，为"span.bg1"和"a:hover span.bg2 (when it is :hover)"应用CSS背景样式类

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

  </li>

j查询

    $(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 效果对用户更友好，看起来也不错 :)