Condenser jQuery mouseOver et mouseOut

Question

Imaginez que j'ai cet extrait HTML 4 fois pour quatre sections différentes de 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> 

et mon jquery ressemble à ceci

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

Toute idée comment faire la jquery un peu mais plus petit?

Answer 1

C'est ce que je suis venu avec pour 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> 

pour html J'Enveloppez la divs dans un autre div id "catégories"

Answer 2

Si vous êtes inquiet au sujet de la bande passante:

• gzipper

Si vous êtes inquiet au sujet du temps d'exécution:

• Profil et se rendre compte qu'il ne fait pas différence

Answer 3

Certaines de vos liaisons peuvent être combinées, si elles appellent la même fermeture.

de

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

et

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

);

Answer 4

En outre, jQuery a une fonction pour des événements de liaison (« bind ») qui est généralement la meilleure façon d'aller:

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

Vous pouvez lire à ce sujet ici - http://docs.jquery.com/Events/bind#typedatafn