Почему мои задержки не работают?

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

    }); 
}); 

Демо: Fiddle

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); 
    }); 
});