Fading menus in 5 lines of JavaScript
September 16th, 2008 | Published in javascript, jquery
Ever wanted your menus to fade when you mouse over them? With jQuery, copy this code into your page and run it when the DOM is ready (That means wrapping it with $(function(){ ... }); to use jQuery’s $(document).ready() function).
Replace #nav li below with whatever your navigation items are.
$("#nav li").hover(function(){ //add an event listener for hover on the li nodes
$(this).fadeOut(0); // fade them to white immediately
},function(){
$(this).fadeIn("slow"); // fade them to their original color our mouse out
});
To extend this, you could use the jQuery animate function, along with the color plug in to just fade the background color and not the text itself.