Задержка выпадающего - settimeout

Question

Я использую jquery для создания собственного выпадающего списка с кодом ниже. Я попробовал эффект тайм-аута jquery, который почти работал, его использование было похоже на .idle (500);

Метод, который я имею ниже, сбрасывает ВСЕ меню сразу. По сравнению с неиспользованием тайм-аута и вложенной функции ishowmenu.

Есть идеи о том, что я могу сделать?

При использовании idle () сначала показывается начальная высота div, а затем сбрасывается остаток, хотелось бы, чтобы он показывал ALL через 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и тот факт, что вы можете передать ему любую пару свойство / значение для анимации

Так что для вашего кода удалите 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

Надеюсь, это поможет ...