Jquery mouse-over fade-in/out (best practices)

Question

I've got working Jquery code to fade in/out descriptive text in a div below the question. The problem? The solution is not very elegant. Here's what I've got:

$("#home").mouseover(function() {
    $("#homeText").fadeIn("slow");
});
$("#homeText").mouseout(function() {
    $("#homeText").fadeOut();
});

I know there is better way to do this, I'm just not sure what it is.

Answer 1

you could use hover, the first function will act on a "hover over" and the second will act on a "hover out"

The documentation is located here: http://docs.jquery.com/Events/hover

$("#home").hover(function(){
    $("#homeText").fadeIn("slow");
},
function(){
    $("#homeText").fadeOut();
});

Answer 2

Jon, Great advice! I used as a staring point though for a more complete solution. Doing this with just the basic hover would still leave me with a hover call for single menu item..A lot of redundant code. So using what you suggested, I came up with this:

$('.topMenu').hover(function()
  {
  $('#_'+this.id).fadeIn("slow");
  },
  function ()
   {
  $('#_'+this.id).fadeOut();  
   });
});

All menu items are given the topMenu class and ID. The corresponding div to display is the same id as the menu item, just prefixed with _ Example: ....

Stuff about us!

...

Thanks!