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