Delaying dropdown - settimeout

Question

I am using jquery to create a custom dropdown with the code below. I have tried a jquery timeout effect that almost worked, its uses was like .idle(500);

The method I have below, drops ALL the menus down at once. Compared to not using the timeout and the nested ishowmenu function.

Any ideas on what I can do?

When using the idle(), it first showed the div initial height, then dropped the rest, I wish it would just show ALL after 500 ms.

Any suggestions would be a HUGE help. I have been stuck on this.

UPDATE: I also tried this below, just dropddowns immediately

$(".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

From what I can gather from your question, You want a certain animation (the drop down of a menu) to occur after a certain timeout period.

One way I would do this is leverage jquery's animate function and the fact that you can pass any property / value pair to it, to be animated

So for your code, remove the setTimeout(iShowMenu,500); and then use this code for the main animation part of the function

    $(".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);
             });
       }});

you would also need to move the contents of the inner function iShowMenu to the outer function showMenu

Hope that helps...