延迟下拉-settimeout

Question

我正在使用 jquery 使用下面的代码创建自定义下拉列表。我尝试过一个jquery超时效果，几乎有效，它的用途就像.idle(500);

我下面的方法可以一次性放下所有菜单。与不使用超时和嵌套 ishowmenu 函数相比。

关于我能做什么有什么想法吗？

当使用idle()时，它首先显示div的初始高度，然后丢弃其余部分，我希望它在500毫秒后显示全部。

我也在下面尝试过这个，只是立即下拉菜单

$(".main-heading").idle(2000).one("mouseover", showMenu);

---

function showMenu() {
    setTimeout(iShowMenu,500);
    function iShowMenu(){
        $(".openMenu").each(HideMenu); //Hide any open menus
        $(this).parent().addClass("openMenu");
        if (this.id == "flea-tick-nav") {//If it is out problem one
            h = "280px"; //Or what ever the hight needs to be for that tab
        }else{
            h="200px";
        }
        $(".sub-drop-old", this.parentNode).show().animate({
            height: h
        }, 500, "linear", function() {
            $(this).parent(".main-menu").one("mouseleave", HideMenu);
        });
    }
}
function HideMenu() {
    $(".sub-drop-old:visible", this).stop().animate({ height: "0px" }, 500, "linear", function() {
        $(this).hide().parent(".main-menu").removeClass("openMenu");
        $(".main-heading", this.parentNode).one("mouseover", showMenu);
    });
}
$(function() {
    $(".main-heading").one("mouseover", showMenu);
});

Answer 1

根据我从您的问题中收集到的信息，您希望在一定的超时时间后发生特定的动画（菜单的下拉菜单）。

我这样做的一种方法是利用 jquery 的 animate 函数，并且您可以将任何属性/值对传递给它以进行动画处理，

因此对于您的代码，请删除 setTimeout(iShowMenu,500);然后将此代码用于函数的主要动画部分，

    $(".sub-drop-old", this.parentNode)
      .animate({
         fakeproperty:'fakevalue' //<--- This is a fake property:value, can be anything
        },{
          duration:500, //<--- the fake prop:val animation will delay the callback for 500ms
          complete:function(){ //<--- this is the callback where the actual animation takes place
            $(this).show().animate({
              height: h
             }, 500, "linear", function() {
               $(this).parent(".main-menu").one("mouseleave", HideMenu);
             });
       }});

您还需要将内部函数 iShowMenu 的内容移动到外部函数 showMenu

希望有所帮助。 。