1

私はjQuery（および一般的にはJS）を初めて使用し、それを使用してナビゲーションロールオーバーにフェードイン効果を追加できることを知っています。

現在、ナビゲーションにマスター背景スプライトを使用しています。：hoverでは、背景位置ルールを追加して、各アイテムのスプライトを下にシフトし、ホバー効果を取得しています。

ただし、jQueryを使用して、ロールオーバー効果にスムーズに移行したいと思います。私はそれをグーグルで検索し、いくつかの類似した情報を見つけましたが、ほとんどの場合、私が見つけたものは、2つの画像があり、一方をフェードアウトしてもう一方を表示する場合を扱っていました。しかし、私はCSSのbackground-positionを使用して、画像を単純に下にシフトしています。jQueryを使用してこれをよりスムーズに行うことはできますか？

ここにサイトがあります：http： //tuscaroratackle.com

4

1 に答える 1

2

100-Thからの1つの例

加える

  • 要素にタグを付け、CSS背景スタイルクラスから「span.bg1」および「a：hoverspan.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：でも、ホバー効果の方が使いやすく、見た目も悪くないと思います:)

    • 于 2010-08-25T03:00:14.887 に答える