Question

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

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

但是我想使用jQuery来平滑过渡到翻转效果。我用Google搜索并发现了一些类似的信息，但大多数情况下我发现处理的情况是你有两个图像并且淡出一个以显示另一个图像。但是我使用CSS后台位置来简单地将图像向下移动。我可以用jQuery更顺畅地做到这一点，以及如何使用？

以下是网站：http://tuscaroratackle.com

Answer 1

100-Th

的1个例子

添加

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

< / p>

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


        });

    });

});

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

反而淡化你可以使用任何效果！

P.S。：但我认为：悬停效果更加用户友好并且看起来并不坏：）

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

1 个答案: