為什么我的延誤不起作用？

Question

所以我正在研究一些元素的分階段動畫。 在每一個上，我希望在下一個元素動畫之前有一個定時延遲。 我認為我已經正確地編寫了代碼，但沒有任何延遲正在發揮作用。 相反，所有動畫都會立刻發生。 有人可以解釋我錯過了什么嗎？

謝謝！

$(function() {
   $( "a.engine" ).click(function() {
      $( "img.bg" ).removeClass( "intro_effects");
      $(".fadein").delay(1000).css("visibility", "visible");
      $( "div.menu_container" ).delay(1300).removeClass( "hide");
      $( "div.main_content" ).delay(1600).removeClass( "hide");
   });
});

Answer 1

因為像removeClass（）/ css（）這樣的操作不使用基於隊列的執行，這是延遲的基礎所以嘗試

$(function () {
    $("a.engine").click(function () {
        $("img.bg").removeClass("intro_effects");
        $(".fadein").delay(1000).queue(function () {
            $(this).css("visibility", "visible")
        });
        $("div.menu_container").delay(1300).queue(function () {
            $(this).removeClass("hide");
        });
        $("div.main_content").delay(1600).queue(function () {
            $(this).removeClass("hide");
        });

    });
});

演示： 小提琴

Answer 2

delay（）適用於方法之類的動畫，但不適用於普通方法，因為普通方法不使用隊列

你可以像使用setTimeout一樣

$(function() {
    $( "a.engine" ).click(function() {
        $( "img.bg" ).removeClass( "intro_effects");

        setTimeout(function() {
            $(".fadein").css("visibility", "visible");
        },1000);

        setTimeout(function() {
            $( "div.menu_container" ).removeClass( "hide");
        },1300);

        setTimeout(function() {
            $( "div.main_content" ).removeClass( "hide");
        },1600);
   });
});