1

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

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

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

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

4

1 回答 1

2

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


        });

    });

});

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

    而是淡出你可以使用任何效果！

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

    • 于 2010-08-25T03:00:14.887 回答