Уплотнить JQuery MouseOver и MouseOut

Question

Представьте у меня есть этот HTML-фрагмент в 4 раза по сравнению для четырех различных разделов меню нав

<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> 

и мой JQuery выглядит следующим образом

// 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(); 
} 

Любая идея, как сделать jquery немного, но меньше?

Answer 1

Это то, что я придумал для 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> 

для HTML я завернул дивы в другой DIV с идентификатором «категории»

Answer 2

Если вы беспокоитесь о пропускной способности:

• Gzip это

Если вы беспокоитесь о времени выполнения:

• профиля его и не понимают, что это не разница

Answer 3

Некоторые из ваших привязок можно комбинировать, если они называют одно и то же закрытие.

от

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


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

к

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

и

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

);

Answer 4

Кроме того, JQuery имеет функцию связывания событий («привязывать»), который, как правило, лучший способ пойти:

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

Вы можете прочитать об этом здесь - http://docs.jquery.com/Events/bind#typedatafn