Retarder un menu déroulant jQuery

Question

J'ai créé un menu déroulant jQuery en tant que solution de repli de la version CSS3 normalement utilisée. Je voudrais qu'il retarde la liste déroulante de la même manière que dans le CSS, mais je ne suis pas sûr de savoir comment le faire.

est ici le script:

var iconWidth = 34; // default width of navigation <li>'s 
var slideWidth = 200; // width of the longest slider 
var slideTime = 500; // duration of the sliding animation 
var dropHeight = 160; // height of tallest dropdown, should be number of <li>'s x 40 
var dropTime = 500; // duration of the dropdown animation 

$(function() { 

    // expanding 

    $("#nav li").not("#logo, .parent li").hover(
     function(){ 
      $(this).animate({width:slideWidth + "px"},{queue:false,duration:slideTime}); 
     }, function(){ 
      $(this).animate({width:iconWidth + "px"},{queue:false,duration:slideTime}); 
     } 
    ); 

    // dropdown 

    $("#nav li.parent").hover(
     function(){ 
      $(this).children("ul").animate({height:dropHeight + "px"},{queue:false,duration:dropTime}); 
     }, function(){ 
      $(this).children("ul").animate({height:"0px"},{queue:false,duration:dropTime}); 
     } 
    ); 
}); 

Ce qu'il fait actuellement est d'élargir les deux sens en même temps, mais je voudrais à étendre d'abord à droite, puis vers le bas, puis lors de la contraction, premier contrat en , Puis à gauche.

donc comme ceci:

Hover: 
--> 
| 
v 

Unhover: 
^ 
| 
<-- 

Donc, fondamentalement, par étapes, pas en même temps. Quelqu'un peut-il me montrer comment modifier mon script pour que cela fonctionne?

De même, comment le faire dérouler en fonction du nombre de li dans la navigation, plutôt que d'une hauteur définie?

EDIT: Voici quelques exemples HTML:

<ul id="nav"> 
       <li id="logo"> 
        <p> 
         <img src="images/logo.png" /> 
        </p> 
       </li> 
       <li> 
        <p> 
         <a href="#"><img src="images/dashboard.png" /> Go to Dashboard</a> 
        </p> 
       </li> 
       <li class="parent"> 
        <p> 
         <a href="#"><img src="images/nav-item.png" /> Nav-Item</a> 
        </p> 
        <ul> 
         <li> 
          <p> 
           <a href="#">Create a page</a> 
          </p> 
         </li> 
         <li> 
          <p> 
           <a href="#">View All Pages</a> 
          </p> 
         </li> 
        </ul> 
       </li> 
</ul> 

Answer 1

J'espère que je bien compris votre question:

$(function() { 
    // expanding 

    $("#nav li").not("#logo, .parent li").hover(
     function(){ 
      $(this).animate({width:slideWidth + "px"},{duration:slideTime}); 
     }, function(){ 
      $(this).delay(slideTime).animate({width:iconWidth + "px"},{duration:slideTime}); 
     } 
    ); 

    // dropdown 

    $("#nav li.parent").hover(
     function(){ 
      $(this).children("ul").delay(slideTime).animate({height:dropHeight + "px"},{duration:dropTime}); 
     }, function(){ 
      $(this).children("ul").animate({height:"0px"},{duration:dropTime}); 
     } 
    ); 
});