推遲jQuery下拉菜單

Question

我已經構建了一個jQuery下拉菜單作爲通常使用的CSS3版本的後備。我想讓它像CSS中一樣延遲下拉菜單，但我不知道該怎麼做。

這裏的腳本：

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

什麼它目前所做的是擴大在同一時間兩種方式，但我想它承包，第一份合同了，當第一次擴大到右側，然後放下，然後，然後離開。

所以這樣的：

Hover: 
--> 
| 
v 

Unhover: 
^ 
| 
<-- 

所以基本上，步驟，不能在同一時間。有人能告訴我如何修改我的腳本來完成這項工作嗎？

此外，如何根據導航中li的數量而不是設置高度來下拉？

編輯：下面是一些例子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

我希望我理解正確你的問題：

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