延迟下拉 - settimeout

Question

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

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

关于我能做什么的任何想法？

使用 idle() 时，它首先显示 div 初始高度，然后放下其余部分，我希望它只在 500 毫秒后显示 ALL。

我也在下面尝试过，只是立即下拉

$(".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 的动画功能以及您可以将任何属性/值对传递给它的事实，以进行动画处理

所以对于您的代码，删除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

希望对您有所帮助...