Condense jQuery mouseOver and mouseOut

Question

Imagine i have this HTML snippet 4 times over for four different sections of menu nav

<ul class="navigation">
  <li class="nav-Mens"><a href="#">Mens</a></li>
  <li class="nav-Womens"><a href="#">Womens</a></li>
  <li class="nav-Kids"><a href="#">Kids</a></li>
  <li class="nav-Gear"><a href="#">Gear</a></li>
</ul>
   <div id="Gear">
  <ul class="Gear">
    <table width="300" border="0" cellspacing="5" cellpadding="0">
      <tbody><div style="background-color:#333; color:#000">SHOP GEAR</div>
      <tr>
        <td><a href="#"><b>Snow</b></a>
        <p></p>
          <li><a href="#">Bags</a></li></td>
        <td><a href="#"><b>Surf</b></a>
        <p></p>
          <li><a href="#">Towels</a></li></td>
      </tr>
    </tbody></table>
  </ul>
</div>

and my jquery looks like this

// JavaScript Document
$(document).ready(function() {

//Mens
$("li.nav-Mens").mouseover(function() {
    clearTimeout(timeout);
    $('#Mens').show();
    $('#Womens').hide();
    $('#Kids').hide();
    $('#Gear').hide();
});
var timeout;
$("li.nav-Mens").mouseout(function() {
    timeout = setTimeout('hideMens()', 1000);
});
$('#Mens').mouseover(function() {
    clearTimeout(timeout);
});
$('#Mens').mouseout(function() {
    timeout = setTimeout('hideMens()', 1000);
});

//Womens
$("li.nav-Womens").mouseover(function() {
    clearTimeout(timeout);
    $('#Womens').show();
    $('#Mens').hide();
    $('#Kids').hide();
    $('#Gear').hide();
});
var timeout;
$("li.nav-Womens").mouseout(function() {
    timeout = setTimeout('hideWomens()', 1000);
});
$('#Womens').mouseover(function() {
    clearTimeout(timeout);
});
$('#Womens').mouseout(function() {
    timeout = setTimeout('hideWomens()', 1000);
});

//Kids
$("li.nav-Kids").mouseover(function() {
    clearTimeout(timeout);
    $('#Womens').hide();
    $('#Mens').hide();
    $('#Kids').show();
    $('#Gear').hide();
});
var timeout;
$("li.nav-Kids").mouseout(function() {
    timeout = setTimeout('hideKids()', 1000);
});
$('#Kids').mouseover(function() {
    clearTimeout(timeout);
});
$('#Kids').mouseout(function() {
    timeout = setTimeout('hideKids()', 1000);
});

//Gear
$("li.nav-Gear").mouseover(function() {
    clearTimeout(timeout);
    $('#Womens').hide();
    $('#Mens').hide();
    $('#Kids').hide();
    $('#Gear').show();
});
var timeout;
$("li.nav-Gear").mouseout(function() {
    timeout = setTimeout('hideGear()', 1000);
});
$('#Gear').mouseover(function() {
    clearTimeout(timeout);
});
$('#Gear').mouseout(function() {
    timeout = setTimeout('hideGear()', 1000);
});

});
//Calling all the functions to hide everything
function hideMens() {
    $('#Mens').hide();
}
function hideWomens() {
    $('#Womens').hide();
}
function hideKids() {
    $('#Kids').hide();
}
function hideGear() {
    $('#Gear').hide();
}

Any idea how to make the jquery a little but smaller?

Answer 1

If you are worried about bandwidth:

• Gzip it

If you are worried about execution time:

• Profile it and realise that it makes no difference

Answer 2

Some of your bindings could be combined, if they call the same closure.

from

$("li.nav-Mens").mouseout(function() {
    timeout = setTimeout('hideMens()', 1000);
});


$('#Mens').mouseout(function() {
    timeout = setTimeout('hideMens()', 1000);
});

to

$('li.nav-Mens, #Mens').mouseout(function() {
    timeout = setTimeout('hideMens()', 1000);
});

and

$('#Mens, #Womens, #Kids, #Gear').mouseover(function() {
    clearTimeout(timeout);
}

);

Answer 3

This is what I came up with for javascript:

<script type="text/javascript">
// JavaScript Document  
$(document).ready(function() {
var timeout;
$("ul.navigation li").mouseover(function(){
        var $showDiv = $(this).attr("class").substr(4);
         $("#categories > div").each(function(){
               if($(this).attr("id")==$showDiv){
               $(this).show();
            }
            else
            {
            $(this).hide();
            }

   });
});
$("ul.navigation li").mouseout(function(){
var $showDiv = "#" +  $(this).attr("class").substr(4);
  $("#categories > div").each(function(){
               if($(this).attr("id")==$showDiv){
               $(this).hide();
            }

       });
});

$("#categories > div").mouseover(function(){
 clearTimeout(timeout);
});

$("#categories > div").mouseout(function(){
$currentDiv = $(this).attr("id");
switch($currentDiv){
 case "Mens": timeout = setTimeout('hideMens()', 1000); break;
 case "Gear": timeout = setTimeout('hideGear()', 1000); break;
 case "Kids" : timeout = setTimeout('hideMens()', 1000);break;
 case "Womens" : timeout = setTimeout('hideWomens()', 1000);break;
}
});

});

//Calling all the functions to hide everything
function hideMens() {
    $('#Mens').hide();
}
function hideWomens() {
    $('#Womens').hide();
}
function hideKids() {
    $('#Kids').hide();
}
function hideGear() {
    $('#Gear').hide();
}

</script>

for html I wrapped the divs in another div with id "categories"

Answer 4

Also, jQuery has a function for binding events ("bind") that is usually the best way to go:

$('li.nav-Mens, #Mens').bind("mouseout", function() {
    timeout = setTimeout('hideMens()', 1000);
});

You can read about it here - http://docs.jquery.com/Events/bind#typedatafn