.each函数中最后一个之后的队列动画

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函数，而是要添加一个回调，动画函数将在完成时执行该回调。

$('#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(){})) );
});