jQuery 드롭 다운 메뉴 지연

Question

일반적으로 사용되는 CSS3 버전의 폴백으로 jQuery 드롭 다운 메뉴를 만들었습니다. 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: 
^ 
| 
<-- 

그러니까 기본적으로, 단계가 아닌 같은 시간에. 누군가 내 스크립트를 수정하여이 작업을 수행하는 방법을 보여줄 수 있습니까?

또한 높이를 설정하지 않고 탐색의 리튬 수를 기준으로 드롭 다운을 어떻게 만드나요?

편집 :

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