【问题标题】：queue animation after last in .each function.each 函数中最后一个队列动画
【发布时间】：2012-11-15 15:16:23
【问题描述】：

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

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

【问题讨论】：

标签： jquery jquery-animate queue

【解决方案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(){})) );
});

【讨论】：

啊非常好，这部分不需要queue。对此表示赞赏。我唯一缺少的部分是针对each() 函数中的最后一个元素。我想我可以在这方面申请i.queue(katz_video)（一旦我正确地定位它），但任何帮助都会很棒。再次感谢！
@Zach 我不是 100% 了解你的脚本的作用，但我已经更新了我的答案。
嘿@Emissary - 是的，更干净 - 奇怪的是，如果我什至将该检查的两种情况都更改为alert('hi')，我将一无所获。
@Zach 它只在寻找对函数的引用 IE alert - 如果您键入 alert('hi')，解释器将在那里执行函数然后返回值（在本例中为 null）被分配为回调。
如果你根本没有收到任何警报，那么 js/jQuery 根本就没有运行那部分代码，这可能是某个地方的错字，但如果没有一些实时代码我很难看到可以玩玩。