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

为什么我的延误不起作用？

2 个答案: