• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Animating CSS ul navigation using jQuery

Hi all,

I'm currently in the process of designing a site for a friend of mine but wanted to add a little bit of animation to the main navigation bar to make it all look a bit more polished! My knowledge of coding is very limited so I am finding it quite difficult achieving the effect I'm after!

I currently have the nav bar set up in it's own div tag and have created the usual ul style of navigation and then used the CSS background position property to position the nav bar sprite for a basic roll-over effect. What I'm after though is a smooth transition from the normal button state to the hover state so it looks like the hover state is slowly fading in.

After searching around on Google I have quickly learnt that I will need to add jQuery to my site to achieve this effect. This is fine but I have yet to find a tutorial that teaches me how to get the specific effect I'm after!

If possible could someone explain (in laymans terms) how I go about adding jQuery to the nav bar so it fades between the two states instead of snapping from one part of the sprite to the other? Alternatively, if anyone knows of a good tutorial on how to do this could you point me in the right direction?

I've attached the sprite I'm working with below so you can see the normal and hover states.

Thanks in advance


Cheers for the link... I have looked at the jQuery site before for a suitable tutorial but can't seem to find one that achieves the look I'm after though... unless I'm blind now because of all the searching I've done over that past few weeks! :-(