Animating CSS ul navigation with jQuery

[rosedani]

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
Rosedani

 

[rgregory]

Hi

Not sure if you still need this but here's what you're looking for:

$(function() {
	
// set opacity to nill on page load
$("#menuID ul span").css("opacity","0");

// on mouse over
$("#menuID ul span").hover(function () {
// animate opacity to full
$(this).stop().animate({
opacity: 1
}, 'slow');
},
// on mouse out
function () {
// animate opacity to nill
$(this).stop().animate({
opacity: 0
}, 'slow');
});

});

You need to set your menu items up like this, and the background image needs to be defined in CSS:

      <li><a href="#" class="uniqueClass"><span></span></a></li>

I have a working example here if you wish to look further into the code....

Our Locations | Find a Dealership | Vertu Motors PLC

Rachel

 

[Connor]

I am sure you can do this affect using CSS3.

Just coming to the end of my lunch break at work so I'm afraid I can't give you a bit more guidance.

Just look up CSS3 Transition fade