Question

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

我在下面的方法中，立即删除所有菜单。与不使用超时和嵌套ishowmenu函数相比。

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

当使用idle（）时，它首先显示div初始高度，然后丢弃其余部分，我希望它会在500 ms后显示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的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

希望有帮助...

延迟下拉 - settimeout

1 个答案: