How can I use jQuery to add a fade in hover effect to my nav items?

Question

I'm brand new to jQuery (and JS in general) and I know it is possible to use it to add a fade in effect to my navigation rollovers.

Right now I'm using a master background sprite for the nav, and on :hover I'm just adding a background-position rule to shift the sprite down for each item to get my hover effect.

But I'd like to use jQuery to bring a smooth transition to the rollover effect. I googled it and found some similiar info, but mostly what I found dealt with instances where you have two images and fading one out to reveal the other. But I'm using CSS background-position to simply shift the image down. Can I do this more smoothe with jQuery, and how?

Here's the site: http://tuscaroratackle.com

Answer 1

1 example from 100-Th

Add in

tag a element , and apply from CSS background style class for the "span.bg1" and "a:hover span.bg2 (when it is :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();


        });

    });

});

and the same thing when mouse is out to change back background, it is not a code ready to use, it even wasn't tested , but it is for an idea for you

instead fade you can use any effect !

P.S. : But I think just :hover effect is more user friendly and doesn't look bad :)