views:

127

answers:

1

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

+1  A: 
Alexander Corotchi
Nice - but is there a way to do it without adding the extra spans into the markup? I'd prefer not to duplicate the markup if possible for a gracefully degrading experience to non-js or even non-css users.
JAG2007
yup,change gust the class, and apply fadeIn and fadeOut
Alexander Corotchi
I saved for you another example , you can add some delay for fading effect
Alexander Corotchi
OK, I'm almost there I think. That kinda worked - except if you look at it right now you'll see what happens is the effect appears, then fades in and out, instead of just fading in on hover.
JAG2007
BTW - thanks for your help with this.
JAG2007