http://www.shopdev.co.uk/blog/animated-menus-using-jquery/
The post is very easy to follow and explains very well.
This is a good example for hover function as well. It uses simple hover and animate function for opacity and speed. It uses .stop() to avoid a broken accordion effect.
$(function() {
// set opacity to nill on page load
$("ul#menu span").css("opacity","0");
// on mouse over
$("ul#menu 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");
});
});
Posts
