更新

Question

我正在浏览动画列表，如下所示：

function katz_logo() {
    $('#logo')
    .delay(500)
    .animate({opacity: 1}, 1000)
    .queue(katz_subsites);
}

function katz_subsites() {
    var subsites = $('#subsites li'),
        subsitesLength = subsites.length;

    subsites.each(function(i) {
        $(this)
        .delay(i * 300)
        .animate({top:0, opacity: 1 }, 800);

        if (i === subsitesLength - 1) {
            alert('hi');
        }

    });
}

function katz_video() {
    if (!Modernizr.touch) {
        $('#home_video').delay(500).fadeIn(1000);
    }
}

katz_logo();

每个动画都被定义为一个函数，然后最终用katz_logo()调用以启动魔法。在katz_subsites()函数中，我循环遍历每个可用的li，然后我想要做的是在到达最后一个元素后排队katz_video()函数，但即使我的实验也是如此警报未按预期运行。

所以 - 我遇到麻烦的部分是如何获取最后一个值（我发誓我一直在关注这里的其他答案），然后如何在达到目标后排队。

非常感谢任何帮助。谢谢！

更新

代码进展 - 仍然坚持定位each()语句中的最后一个元素，然后排队下一个动画：

function katz_logo() {
    $('#logo')
    .delay(500)
    .animate({opacity: 1}, 1000, katz_subsites);
}

function katz_subsites() {
    var subsites = $('#subsites li'),
        subsitesLength = subsites.length;

    subsites.each(function(i) {
        $(this)
        .delay(i * 300)
        .animate({top:0, opacity: 1 }, 800);

        if (i === subsitesLength - 1) {
            i.queue(katz_video);
        }

    });
}

function katz_video() {
    if (!Modernizr.touch) {
        $('#home_video').delay(500).fadeIn(1000);
    }
}

katz_logo();

工作代码：

function katz_logo() {
    $('#logo')
    .delay(500)
    .animate({opacity: 1}, 1000, katz_subsites);
}

function katz_subsites() {
    var subsites = $('#subsites li'),
        subsitesLength = subsites.length;

    subsites.each(function(i) {
        $(this)
        .delay(i * 300)
        .animate({top:0, opacity: 1 }, 800, (i===subsitesLength-1 ? katz_video : (function(){})) );
    });
}

function katz_video() {
    if (!Modernizr.touch) {
        $('#home_video').delay(500).fadeIn(1000);
    }
}

katz_logo();

Answer 1

我认为你错过了使用queue函数，而你正在寻找的是添加animate函数在完成时执行的回调。

$('#logo')
  .delay(500)
  .animate({opacity: 1}, 1000, katz_subsites);

编辑回应评论 - 再次，同样的原则查看您的代码，类似于：

subsites.each(function(i) {
  $(this)
    .delay(i * 300)
    .animate({top:0, opacity: 1 }, 800, 
      (i===subsitesLength-1 ? katz_video : (function(){})) );
});

最后在.each函数中排队动画

更新

1 个答案: